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在闭包中声明变量,除非你需要.

Answer 2

对于动态创建的元素,尝试使用如下委托on:

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

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

码:

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