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树中删除元素时，您还需要记住取消绑定事件处理程序，否则您的脚本最终可能会泄漏内存。

<li>在ajax [事件委托问题] </li>之后单击功能不起作用

3 个答案: