动态生成的 <li> 中未触发点击事件答案

【问题标题】：click event not fired in dynamically generated <li>动态生成的 <li> 中未触发点击事件
【发布时间】：2012-07-10 05:33:52
【问题描述】：

大家好，我正在生成我的 ul 和 li，如下所示，并且想要触发 click 事件，但 delegate()、on() 和 click() 方法不起作用，只有 live() 效果很好，但 live() 是不推荐使用的函数，所以我还有其他方法可以帮助我吗？？/ 这里 "loadpage" 是我的 html 代码中存在的 div

<script type="text/javascript">
       $(document).ready(function() {
             $('#LoadPage').append('<ul class="testul" id="list">');
                 for (var i = 1; i < 5; i++) {
                   $('#list').append('<li class="clicks" id="item'+i+'"></li>');
                 }          
             $('#LoadPage').append('</ul>');
        });

            // click event works  wtih .live() onlyyy.......................
        $('.clicks').live('click', function() {
            alert('hello');
        });






        /*$(".clicks").on("click", function(){
            alert('hello');
        });
        $("#testul").delegate("li", "click", function() {
        alert('hello');
        });



        $("#testul").delegate("li", "click", function() {
            alert('hello');
              });*/

    </script>

【问题讨论】：

为什么要尝试绑定方法？
因为简单的点击不起作用

标签： jquery html list dynamic click

【解决方案1】：

您的选择器应该与文档匹配，因为文档确实存在。然后，您将 on 传递将存在的点击的选择器。通过最初在 .clicks 上进行匹配，您的结果集是空的，并且没有任何反应。

$(document).on("click", ".clicks", function(){ 
        alert('hello'); 
});

live 的文档讨论了如何将使用它的代码转换为使用 on 或 delegate：http://api.jquery.com/live/。

【讨论】：

【解决方案2】：

嗯嗯..

我试过了，效果很好

试试this

【讨论】：

【解决方案3】：

delegate()、on() 和 click() 方法不起作用，因为您还没有加载 html。加载 li 元素后尝试定义它。

<script type="text/javascript">
    $(document).ready(function() {
        $('#LoadPage').append('<ul class="testul" id="list">');
            for (var i = 1; i < 5; i++) {
              $('#list').append('<li class="clicks" id="item'+i+'"></li>');
            }          
        $('#LoadPage').append('</ul>');
        $('.clicks').click(function() {
            alert('hello');
        });
     });
</script>

【讨论】：

【解决方案4】：

    $(document).ready(function() {
         $('#LoadPage').append('<ul class="testul" id="list">');
             for (var i = 1; i < 5; i++) {
               $('#list').append('<li class="clicks" id="item'+i+'"></li>');
             }          
         $('#LoadPage').append('</ul>');
    });

        // click event works  wtih .live() onlyyy.......................
    $('.clicks').live('click', function() {
        alert('hello');
    });

只需将其更改为

    $(document).ready(function() {
         $('#LoadPage').append('<ul class="testul" id="list">');
             for (var i = 1; i < 5; i++) {
               $('#list').append('<li class="clicks" id="item'+i+'"></li>');
             }          
         $('#LoadPage').append('</ul>');
         // click event works  wtih .live() onlyyy.......................
         $('.clicks').click(function() {
             alert('hello');
         });
    });

以前那些<li>的项目在DOM中是不存在的，插入到DOM之后，它可以有任何功能。

【讨论】：

live 工作正常，正如我提到的那样，即使它在循环之外；但是感谢我学到了新的东西，即使我必须对循环中的所有元素使用点击事件...:)

【解决方案5】：

从 jQuery 1.7 开始，.live() 方法已弃用

您使用的是什么版本的 jQuery？关于 1.7 版本中已经添加了查看文档here

如果您包含正确版本的 jQuery，它应该可以正常工作。

关于委托，试试这个here

【讨论】：

您的控制台是否有任何错误？因为 on 应该可以正常工作