1

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

3 回答 3

5

委托活动

代替

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

和

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

更好.. 用绑定事件时页面上存在的静态祖先替换文档。

于 2013-07-08T19:34:46.973 回答
1

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

于 2013-07-08T19:37:27.533 回答
1

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

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

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

于 2013-07-08T19:38:24.010 回答