Question

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

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

Answer 1

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

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

请注意，将此代码置于for循环之外。

Answer 2

更改

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

到

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

Side注意：这会将事件处理程序绑定到每个元素。您可以使用answer中提到的Rajaprabhu之类的事件委派。但是，委托事件处理程序将比直接绑定事件处理程序慢。因此，您可能会在应用程序中拥有多少这样的元素。如果您要进行委托，最好将事件处理程序绑定到一个未动态添加的直接父元素，以便响应更快。例如，如果事件处理程序未动态添加，则可以将事件处理程序绑定到父<ul>，并且不会从页面中删除

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

jquery绑定for循环中的click事件

2 个答案: