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

Posted 2023-02-24

【中文标题】可以在 jQuery 生成的内容中应用 jQuery 吗？

【英文标题】：Can jQuery be applied in jQuery generated content?

【发布时间】：2012-04-22 19:18:36

【问题描述】：

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

当点击一个 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元素？

提前致谢！

【问题讨论】：

Later-inserted tags not seen by JQuery 的可能重复项

@KrisIvanov .live() 已弃用，.on() 现在是首选方法

【参考方案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);
);         

【参考方案2】：

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

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

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

【讨论】：

不要使用live()。 delegate() 是旧版本的替代方案。

【参考方案3】：

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

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

【讨论】：

这不是委托事件处理程序，并且仍然会遇到 OP 使用 click() 描述的相同问题

【参考方案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 应该是唯一的。如果您想拥有组标识符，请改用类。

【参考方案5】：

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

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

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

【讨论】：

live() 已被弃用，取而代之的是 on()。即使在旧版本的 jQuery 中，它也很慢，而您应该使用 delegate()。

【参考方案6】：

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

【讨论】：

.live() 已弃用，.on() 现在是首选方法

哦，我不知道，我刚开始使用 jQuery。我会尝试 .on() 处理程序，看看是否能得到结果。谢谢

看起来 jQuery 网站已关闭，但 Rory 的回答对如何使用它有很好的了解。

如果你使用 live()，一定要像这样在你的父元素上调用它... $("ul").on('click', 'li', function(e) ...这不起作用... $("li").on('click', function(e) ...