<li> 单击函数在 ajax 后不起作用[事件委派问题]

Question

在我的网页中，我每5秒更新一次无序列表$.get（）的内容。问题是列表项的单击功能不起作用。列表项更新得很好，但点击功能出现了问题

       $(document).ready(function(){
           $(".request").click(function(){
            alert("hello");
                        //do some stuff
                      });

          window.setInterval(function() {
         $.get('/changeListItems/',function(data,status){
            //alert(data[0]);
            $('#collabRequests > li').remove();
              for(user in data)
              $('#collabRequests').append('<li class="request">'+'user-'+data[user]+' wants to collaborate!'+'</li>');
            });
        },5000);   
 });

   <!-- Html snippet -->
     <div id="invitedUsers">
    <h2> List of users you have invited for this page</h2>  
    <ul id="collabRequests">        
    </ul>   
   </div>

Answer 1

委派事件

更换

$(".request").click(function(){

带有

$(document).on("click", ".request", function(){

还是更好。。将文档替换为绑定事件时页面上存在的静态祖先。

Answer 2

您的选择器$（".request"）只计算一次。它不会定期扫描DOM来查找该类的新元素，并将单击处理程序附加到它们。您正在动态修改内容，而不是重新附加处理程序。

Answer 3

问题是，您试图将事件处理程序直接附加到在侦听DOM中不存在的元素上。

正如Sushanth所建议的，在动态注入的DOM节点上处理事件的最佳方式是简单地委托它们。

另一种选择是在将新节点添加到DOM时绑定事件处理程序，但如果添加/删除许多节点，这可能会很快变得昂贵。您还需要记住，无论何时从DOM树中删除元素，都要解除事件处理程序的绑定，否则脚本可能会泄漏内存。