javascript jQuery 不适用于文档加载后创建的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19758242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery doesn't work with elements created after document load
提问by dkapa
I created two elements dinamically with jQuery:
我用 jQuery 动态地创建了两个元素：
a picture and a Close button
一张图片和一个关闭按钮
I wrote the code to remove both in doument.ready function:
我在 doument.ready 函数中编写了删除两者的代码：
$( ".deletepreview" ).click(function() {
code = $(this).data("prevcode");
$('#'+code).remove();
$(this).remove();
});
But it doesn't work, and I think this is because the code doesn't search in the code created after the document load.
但它不起作用，我认为这是因为代码不会在文档加载后创建的代码中搜索。
How can I solve this problem?
我怎么解决这个问题？
回答by nietonfir
You need to use delegated events via on()if you want events to be handled on dynamically added elements:
on()如果您希望在动态添加的元素上处理事件，则需要使用委托事件：
$(document).on("click", ".deletepreview",function() {
var code = $(this).data("prevcode");
$('#'+code).remove();
$(this).remove();
});
I slightly modified your example: always declare variables with varin closures except when you need to.
我稍微修改了您的示例：var除非需要，否则始终使用in 闭包声明变量。
回答by Irvin Dominin
For dynamically created elements try using delegation with onlike:
对于动态创建的元素，请尝试使用委托，on例如：
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.
事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在文档就绪处理程序中为页面上 HTML 标记中的元素执行事件绑定。如果将新 HTML 注入页面，则在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件附加事件处理程序，如下所述。
委托事件的优点是它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，如果事件处理程序想要监视文档中的所有冒泡事件，则此元素可以是模型-视图-控制器设计中视图的容器元素。在加载任何其他 HTML 之前，文档元素在文档的头部可用，因此可以安全地在那里附加事件，而无需等待文档准备就绪。
Code:
代码：
$('body').on('click', '.deletepreview', function() {
var code = $(this).data('prevcode');
$('#'+code).remove();
$(this).remove();
});
