Question

大家好我生成我的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>

Answer 1

您的选择器应与文档匹配，因为文档实际存在。然后，您将在选择器上传递以获取将存在的点击。通过最初匹配.clicks，您的结果集为空，没有任何反应。

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

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

Answer 2

嗯...

我尝试了它并且效果很好

尝试this

Answer 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>

Answer 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后，它可以具有任何功能。

Answer 5

从jQuery 1.7开始，不推荐使用.live（）方法

您使用的是哪个版本的jQuery？在版本1.7中添加了On，请查看文档here

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

关于代表，请尝试这个here

在动态生成的<li> </li>中未触发单击事件

5 个答案: