<li> ajax 后单击功能不起作用[事件委托问题] [重复]答案

【问题标题】：<li> click function not working after ajax[Event delegation issue] [duplicate]<li> ajax 后单击功能不起作用[事件委托问题] [重复]
【发布时间】：2013-07-08 19:33:28
【问题描述】：

在我的网页中，我每 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>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

委派活动

替换

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

与

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

更好.. 将 document 替换为绑定事件时页面上存在的静态祖先。

【讨论】：

第十亿次......
我知道.. 与这个问题相关的帖子太多了。
@Sushanth-- 有什么区别？
@user2545792 因为元素是动态创建的，所以需要这样做
事件仅绑定到事件绑定时页面上可用的元素。在您的情况下，当创建一个新的 request 元素时。事件绑定到元素而不是类

【解决方案2】：

您的选择器 $(".request") 被评估一次。它不会定期扫描 DOM 以查找具有该类的新元素并将单击处理程序附加到它们。您正在动态修改内容，而不是重新附加您的处理程序。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：