1

大家好，我正在生成我的 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>
4

5 回答 5

4

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

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

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

于 2012-07-10T05:43:00.363 回答
2

嗯..

我试了一下，效果很好

试试这个

于 2012-07-10T05:42:49.250 回答
1

方法 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>
于 2012-07-10T05:46:39.577 回答
1 
    $(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 后，它可以具有任何功能。

于 2012-07-10T05:48:42.423 回答
0

从 jQuery 1.7 开始，不推荐使用 .live() 方法

您使用的是什么版本的 jQuery？On 已在 1.7 版本中添加，请查看此处的文档

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

关于代表在这里试试这个

于 2012-07-10T05:49:41.307 回答