javascript - jQuery 不适用于文档加载后创建的元素

Question

我用 jQuery 创建了两个元素：

图片和关闭按钮

我编写了代码以在 doument.ready 函数中删除两者：

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

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

我怎么解决这个问题？

Answer 1

on()如果您希望在动态添加的元素上处理事件，则需要使用委托事件：

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

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

Answer 2

对于动态创建的元素，请尝试使用以下委托on：

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

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他 HTML 之前，文档元素在文档的头部是可用的，因此在此处附加事件是安全的，而无需等待文档准备好。

代码：

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