Jquery .click以編程方式添加html後無法正常工作

我在asp.net中開發一個web應用程序。我正在使用jquery以編程方式在＃messages-list中添加/附加消息，它顯示正常，但我想要顯示單擊msg時從右側流動的div。我添加了.click事件，但它不起作用。奇怪的是，當我粘貼靜態/手動的HTML代碼和評論jQuery的部分，附加HTML編程，點擊工作正常，我不知道問題在哪裏。而且在Chrome控制檯中沒有錯誤。請幫助。我的代碼如下。Jquery .click以編程方式添加html後無法正常工作

我的HTML代碼

<ul id="messages-list"> 
</ul> 
<div id="MessagePane" style="height: 666px; display: none;"> 
    <div class="inner-pane"> 
     <div style="overflow: hidden;"> 
     <a href="#" class="floatleft next-step message-close" data-pane="MessagePane">Close</a> 
     <a class="floatright" id="message-detail-date">July 9, 2013</a> 
     </div> 
     <div class="clear"></div> 
     <h4 id="message-detail-title">Important Message: Pinapple Shortage</h4> 
     <p id="message-detail-content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent.<br> 
     </p> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum ornare dui sed commodo. Class aptent taciti sociosqu ad litora torquent. 
     </p> 
    </div> 
</div>

我的JavaScript/jquery的部分

$("ul#messages-list").append('<li><a href="#" class="arrow-list message" data-pane="MessagePane"><div><div msgggggg</div></a></li>'); 

    $('.arrow-list.message').click(function() { 
     alert('dsad'); 
     $(this).parent().siblings().find('a').removeClass('transparent'); 
     $(this).addClass('transparent'); 
     var height = $('#body_inner').outerHeight(); 

     if ($('#' + $(this).data('pane')).is(":visible")) { 

      $('#' + $(this).data('pane')).hide('slide', { 
       direction: 'right' 
      }, 300).css('height', height).show('slide', { 
       direction: 'right' 
      }, 500); 
     } else { 
      $('#' + $(this).data('pane')).css('height', height).show('slide', { 
       direction: 'right' 
      }, 500); 
     } 
    }); 

    $('.message-close').click(function() { 
     $('.message').removeClass('transparent') 
     $('#' + $(this).data('pane')).hide('slide', { 
      direction: 'right' 
     }, 500); 
    });

來源

2013-12-11 saadsaf

可能重複[通過動態生成的元素引發的事件沒有被事件處理程序捕獲（http://stackoverflow.com/questions/12829963/events-triggered-by - 動態生成元素不被事件捕獲） –

和[事件綁定在動態創建的元素上？]（http://stackoverflow.com/q/203198/218196） –

由於。 arrow-list.message元素是動態創建的，您需要使用事件委託來向這些元素註冊事件處理程序。

當你使用$('.arrow-list.message').click(....);來註冊一個事件處理程序時，它只會註冊那些在代碼執行時已經存在於dom中的元素的句柄，在這種情況下，因爲這些元素是在處理程序之後創建的沒有得到重視新創建的元素

與此

$(document).on('click','.arrow-list.message',function() { 
      alert('dsad'); 
      $(this).parent().siblings().find('a').removeClass('transparent'); 
      $(this).addClass('transparent'); 
      var height = $('#body_inner').outerHeight(); 

      if ($('#' + $(this).data('pane')).is(":visible")) { 

       $('#' + $(this).data('pane')).hide('slide', { 
        direction: 'right' 
       }, 300).css('height', height).show('slide', { 
        direction: 'right' 
       }, 500); 
      } else { 
       $('#' + $(this).data('pane')).css('height', height).show('slide', { 
        direction: 'right' 
       }, 500); 
      } 
     }); 

     $(document).on('click','.message-close',function() { 
      $('.message').removeClass('transparent') 
      $('#' + $(this).data('pane')).hide('slide', { 
       direction: 'right' 
      }, 500); 
     });

來源

2013-12-11 07:25:23

謝謝......它工作得很好 – saadsaf

@Sridhar R非常感謝你！我是jQuery和Javascript的新手。您能否建議我提供有關事件處理程序如何在編程修改的dom上工作的信息鏈接？即爲什麼.on（）正常工作，爲什麼.click（）不會？ – GradDev

使用on方法：

$(document).on('click','.arrow-list.message', function() {...

來源

2013-12-11 07:24:58 Pascalz

爲什麼要將OP使用該方法？請解釋問題以及您的答案如何解決問題。 –

-1

嘗試使用jQuery的直播點擊

$（ '文件'）。住（ '點擊'，功能{...}） ;

來源

2013-12-11 07:26:35 Ammar

自jQuery 1.9以來，jQuery'.live'已被棄用，並且不再存在。 –

已棄用，所以不要使用 – robieee

live（）已棄用。 –

-1

試試這個太..

$(function(){ 
    $('.arrow-list.message').click(function() { 

    }); 

    $('.message-close').click(function() { 

    }); 
});

的

來源

2013-12-11 07:28:37

爲什麼OP應該這樣做？請解釋問題以及您的答案如何解決問題。 –

Jquery .click以編程方式添加html後無法正常工作

回答

相關問題