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

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

当您调用 ("li").click() 时，您将事件绑定到现有的 li 元素。当您创建新的 li 元素时，您需要将它们绑定到事件以便单击工作。

所以，把你的循环改成这样吧……

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

Answer 2

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

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

如果您的 li 在某个固定的 div 中，您可以通过将第一个 sn-p 中的 document 替换为该 div 的选择器来使其更快；并制作第二个$(SELECTOR).on("click","li",function(){...})

Answer 3

因为 .click 功能与所有 li 的绑定发生在这个新的创建之前。 JQuery 有 .on() 函数，可以解决你的问题。

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

Answer 4

当您使用事件快捷方式（例如 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 元素都具有't' 的id。这将导致无效代码，因为 id 应该是唯一的。如果您想拥有组标识符，请改用类。

Answer 5

添加到页面的“li”元素没有将函数绑定到其点击事件处理程序。您需要使用 jQuery live() 函数来执行此操作。

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

基本上你需要做 .live("click",function(){}) 而不是 .click(function(){})

Answer 6

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