Question

我正在使用.each函数来迭代元素列表。我有匹配元素的初始列表和.each在这些方面很有效。但是我可以通过AJAX方法添加新的元素...。但是这些新添加的元素不起作用吗？

我知道实时事件和新添加元素的事件重新绑定，但是.each不是事件我找不到任何关于如何正确使用它来影响新添加元素的帮助。

如何解决这个问题？

//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');
        }); 
    }
});

谢谢，普里莫兹

Answer 1

这是因为.each()在运行时循环遍历匹配的元素...当你调用它时，新的元素不会在那里做。解决方案：再次调用它，但仅在添加新元素时调用它。您需要在ajax结果上调用相同的.each()，并使用结果的上下文来限制每个结果。

例如，如果你当前有这个：

$(".myDiv").each(function() {
 //stuff here
});

你需要在成功中调用相同的选择器和相同的代码（或完成，无论你使用什么）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...
}

这里的关键是, resp位，它告诉jQuery选择你以前的相同元素，但只在第二个参数的上下文中，在这种情况下：你的ajax包含需要爱的新元素的回应。

基于新问题代码更新

首先，您可以在此处缩短代码（可选不需要）：

$('#chk-selected').change(function(){
    if($(this).is(':checked')) {
        $(".lib-item.item-selected").slideDown('fast');
    }
    else {
        $(".lib-item.item-selected").slideUp('fast');
    }
});

在回调中，触发相同的处理程序再次运行（这不会改变选择，只是触发处理程序运行）：

onComplete: function(event, queueID, fileObj, response, data)
{
    $(".blank").remove();
    $("#lib-contentWrap").append(response); 
    $('#chk-selected', response).trigger('change');
}

jQuery $（element）.each函数不适用于新添加的元素

1 个答案:

基于新问题代码更新