JQuery .on() - 克隆动态内容

Question

我正在开发一个项目，用户可以在该项目中执行一些实时搜索功能。当通过 JQuery Ajax 显示实时搜索结果时，我需要用户能够单击显示的结果之一并在页面上的其他位置创建该结果的克隆。我发现的问题是，由于这些新的实时搜索结果不会在第一页加载时处理，我认为它们是 DOM 中不存在的“幻像代码”。我对 JQuery 的 on() 和 bind() 函数做了一些研究，但不确定如何将它们实现到我自己的上下文中。

这是我的 JQuery

$(".add").click(function() {
        $(this).parent("li").clone(true).appendTo(".doc_list:first");                       

});

在该片段中(this)指的是我的按钮，该按钮存在于 LI 元素(父元素)内部，该按钮是通过实时搜索结果动态创建的。我需要复制该 LI 元素。

如果需要更多代码，请告诉我。

Answer 1

由于您的 .add 按钮在页面加载后添加到 DOM，即。动态地，因此您需要一个委托(delegate)事件处理程序(也称为实时)。

$(".doc_list").on('click', '.add', function() {
    $(this).parent("li").clone(true).appendTo(".doc_list:first");
});

这里我使用 .doc_list 作为容器，但如果 .doc_list 也是动态元素，则将其替换为页面加载时属于 DOM 的其他静态元素。