Javascript jQuery不能处理文档加载后创建的元素

我使用jQuery以友好方式创建了两个元素：

一幅画 还有一个关闭按钮

我编写了在doument.ready函数中删除这两个函数的代码：

$( ".deletepreview" ).click(function() {
    code = $(this).data("prevcode");
    $('#'+code).remove();
    $(this).remove();
});

但它不起作用，我认为这是因为代码不会在加载文档后创建的代码中搜索

---

如何解决此问题？

如果希望在动态添加的元素上处理事件，则需要通过使用委派事件：

$(document).on("click", ".deletepreview",function() {
  var code = $(this).data("prevcode");
  $('#'+code).remove();
  $(this).remove();
});

---

我稍微修改了您的示例：在闭包中始终使用var声明变量，除非您需要。

对于动态创建的元素，请尝试使用类似的委托：

事件处理程序仅绑定到当前选定的元素；他们 在代码调用.on时，页上必须存在。 要确保元素存在并且可以选择，请执行事件 在文档就绪处理程序中为 页面上的HTML标记。如果新的HTML被注入到页面中， 选择元素并在创建新HTML后附加事件处理程序 放入页面中。或者，使用委派事件附加事件 处理程序，如下所述

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素。通过 选择一个元素，该元素保证在 已附加委派事件处理程序，您可以使用委派事件 避免频繁附加和删除事件处理程序。这 元素可以是视图中的容器元素 例如，模型视图控制器设计，或记录事件 处理程序希望监视文档中的所有冒泡事件。这个 文档元素在之前的文档头中可用 加载任何其他HTML，因此可以安全地在那里附加事件，而无需 正在等待文档准备就绪

代码：

---

看看其他类似的答案：还有。一百万美元的答案谢谢你救了我一天

$('body').on('click', '.deletepreview', function() {
  var code = $(this).data('prevcode');
  $('#'+code).remove();
  $(this).remove();
});