Jquery在for循环中绑定click事件

jquery bind click event in for loop

本文关键字：绑定 click 事件 循环 for Jquery      更新时间：2023-09-26

我试图在for循环中绑定单击事件，但任何删除按钮仅删除最后一个列表项。你知道为什么会这样吗?

for ( var key in editedPredef.predefinition) {
      var listItem = $("<li></li>").addClass("ui-widget-content");
      listItem.text("some text");
      var removeListItem = $("<span class='"ui-icon ui-icon-closethick'"></span>");
      removeListItem.click(function() {
        listItem.remove();
      });
      listItem.append(removeListItem);
      containerElement.append(listItem);
    }

不要写在for循环中，只使用event-delegation， 

$(document).on('click','.ui-icon.ui-icon-closethick',function(){
  $(this).closest('li').remove();
});

请注意，将这段代码放在for循环之外。

变化

removeListItem.click(function() {
    listItem.remove();
  });


removeListItem.click(function() {
    $(this).parent('li').remove();
  });

旁注:这将为每个元素绑定一个事件处理程序。您可以使用他的回答中提到的Rajaprabhu之类的事件委托。但是，委托事件处理程序将比直接绑定事件处理程序慢。因此，问题在于您的应用程序中可能有多少这样的元素。如果要进行委托，最好将事件处理程序绑定到一个直接的父元素，这不是动态添加的，这样响应会更快。例如，如果事件处理程序不是动态添加的，并且不会从页面(如

)中删除，则可以将其绑定到父<ul>。
$('ul').on('click','.ui-icon.ui-icon-closethick',function(){
 $(this).parent('li').remove();
});
相关文章：