jQuery $(element).each 函数对新添加的元素不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2352644/
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 $(element).each function doesn't work on newly added elements
提问by Primoz Rome
I am using .each function to iterate trough list of elements. I am having initial list of matched elements and .each works great on these. But I can add new elements via AJAX method... .each don't work on this newly added elements?
我正在使用 .each 函数来迭代元素列表。我有匹配元素的初始列表，并且 .each 在这些方面效果很好。但是我可以通过 AJAX 方法添加新元素......每个都不适用于这个新添加的元素？
I know about live events and rebinding of events for newly added elements, but .each is not event I could not find any help on how to use this correctly to affect newly added elements.
我知道实时事件和新添加元素的事件重新绑定，但 .each 不是事件我找不到关于如何正确使用它来影响新添加元素的任何帮助。
How to solve this?
如何解决这个问题？
//Uploadify callback where I add new items
onComplete: function(event, queueID, fileObj, response, data)
{
$(".blank").remove();
$("#lib-contentWrap").append(response);
}
});
//And my each loop where I loop the elements. All elements are
wrapped inside the #lib-contentWrap div. And the looping begins
if I change the state of a checkbox (=checkbox check/uncheck)!
$('#chk-selected').change(function(){
if( $(this).is(':checked') ) {
$(".lib-item").each(function () {
if ( $(this).hasClass('item-selected') ) $(this).slideDown('fast');
});
}
else {
$(".lib-item").each(function () {
if ( $(this).hasClass('item-selected') ) $(this).slideUp('fast');
});
}
});
Thanks, Primoz
谢谢，普里莫兹
采纳答案by Nick Craver
This is because the .each()loops through the matched elements when it was run...the new elements weren't there to do things to when you called it. Solution: call it again, but only for the new elements when you add them. You need to call the same .each()on your ajax result, with the context of the result to restrict the each to it.
这是因为在.each()运行时循环遍历匹配的元素......当你调用它时，新元素不在那里做事情。解决方案：再次调用它，但仅在添加新元素时调用。您需要.each()在 ajax 结果上调用相同的结果，并使用结果的上下文将 each 限制为它。
For example if you have this currently:
例如，如果您目前有这个：
$(".myDiv").each(function() {
//stuff here
});
You need to call the same selector and same code in your success (or complete, whatever you're using) ajax function like this:
您需要在成功（或完成，无论您使用什么）ajax 函数中调用相同的选择器和相同的代码，如下所示：
success: function(resp) {
$(".myDiv", resp).each(function() { //each, but only on the new guys
//stuff here (same as before)
});
//Do more stuff with your response...
}
The key here is the , respbit, it tells jQuery to select the same elements you were before, but only inside the context in the second parameter, in this case: your ajax response containing the new elements that need love.
这里的关键是, resp位，它告诉 jQuery 选择与之前相同的元素，但仅在第二个参数的上下文中，在这种情况下：您的 ajax 响应包含需要爱的新元素。
Update based on new question code
根据新的问题代码更新
First, you can shorten your code here (optional not required):
首先，您可以在此处缩短代码（可选，不需要）：
$('#chk-selected').change(function(){
if($(this).is(':checked')) {
$(".lib-item.item-selected").slideDown('fast');
}
else {
$(".lib-item.item-selected").slideUp('fast');
}
});
In the callback, trigger the that same handler to run again (this won't change the selection, just trigger the handler to run):
在回调中，触发相同的处理程序再次运行（这不会改变选择，只是触发处理程序运行）：
onComplete: function(event, queueID, fileObj, response, data)
{
$(".blank").remove();
$("#lib-contentWrap").append(response);
$('#chk-selected', response).trigger('change');
}
