Question

我不知道为什么这不起作用。

当点击li元素时，我调用一个PHP文件来获取一些结果并将其打印在我的页面中。到目前为止一切都很好。

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

            var item = $(this).html();
            $.getJSON('fSearch.php',{sTerm: item}, function(data){
                var results='';

                $.each(data, function(i, item) {
                    results += "<li id='t'>"+item.Description+"</li>";

                });
               $('#ResultsHolder').html("<ul>"+results+"</ul>");

            });

        });

我第一次点击li元素一切正常，我得到了结果。现在这些结果是另一组li，我希望它们的行为相同，但是当我点击生成的li时，函数不会被执行..

为什么会这样？为什么jQuery无法识别动态插入的li元素？

提前致谢！

Answer 1

.click()不是活动处理程序，只是将事件绑定到执行时存在于DOM中的元素。如果您希望事件生效，则需要查看另一个处理程序，例如.on()

Answer 2

当您使用事件快捷方式（例如click或hover）时，它仅适用于页面加载时DOM可用的事件。当您动态添加元素时，您需要将事件侦听器委托给页面中始终可用的元素。

在下面的示例中，我使用了#ResultsHolder。

$("#ResultsHolder").on("click", "li", function(){
    var item = $(this).html();
    $.getJSON('fSearch.php',{sTerm: item}, function(data){
        var results='';
        $.each(data, function(i, item) {
            results += "<li id='t'>"+item.Description+"</li>";
        });
        $('#ResultsHolder').html("<ul>"+results+"</ul>");
    });
});

这应该适用于jQuery 1.7+。对于较旧版本的jQuery，请使用delegate() ...

$("#ResultsHolder").delegate("li", "click", function(){ ...

此外，所有附加的li元素都有id的＆＃39; t＆＃39;。这将导致无效代码，因为ID应该是唯一的。如果您想拥有组标识符，请使用类。

Answer 3

当您调用（“li”）。单击（）时，您将事件绑定到现有的li元素。创建新的li元素时，需要将它们绑定到事件，以便单击生效。

所以，把你的循环改成更像这样的东西......

 $.each(data, function(i, item) {
    var li = $('li').text(item.Description);
    $(li).click(function(e) {  loadChildren(this); });
    $("#ResultsHolder").append(li);
});

Answer 4

添加到页面的'li'元素没有绑定到click事件处理程序的函数。您需要使用jQuery live（）函数来执行此操作。

http://api.jquery.com/live/

基本上而不是.click（function（）{}）你需要做.live（“click”，function（）{}）

Answer 5

使用.delegate()：$(document).delegate("li","click",function(){...})

或者，较新版本.on() $('li').on("click",function(){...})

如果您的li在某个固定div中，您可以通过将第一个代码段中的document替换为该div的选择器来加快速度。并制作第二个$(SELECTOR).on("click","li",function(){...})

Answer 6

因为.click功能与所有li的绑定发生在创建新的之前。 JQuery具有.on（）函数，可以解决您的问题。

$("li").on("click", function(event){
// do functionality
});

jQuery可以应用于jQuery生成的内容吗？

6 个答案: