移除绑定元素后维护委托事件绑定答案

【问题标题】：Maintaining delegated event binding after removal of bound element(s)移除绑定元素后维护委托事件绑定
【发布时间】：2025-12-30 12:25:10
【问题描述】：

在视图中，我有一个无序列表来显示绑定到用户下拉选择的元素。这些列表元素是根据服务器响应动态附加的。

HTML 看起来像：

<div id = "element_list_parent">
  <ul id = "element_list">

  </ul>
</div>

这些元素都有mouseover、mouseout和click事件通过

$("#element_list").on("$event", "img.image_class", function(e){
  //do stuff for event
});

有时，服务器会返回一个空查询。在那种情况下，我有

$("#element_list").remove();
$("#element_list_parent").html("<div class = 'empty_message'>No Results</div>");

我发现如果我选择了一个没有要附加到“element_list”的项目的选项，然后选择了一个包含许多附加项目的选项，则委托事件将不起作用。

是否可以在删除/读取元素的同时保持绑定到它的相同委托事件？

仅供参考，我使用的是 jQuery 1.9。

【问题讨论】：

标签： jquery jquery-events event-delegation

【解决方案1】：

不要将侦听器绑定到您偶尔删除的父元素，而是绑定到始终存在的那个，在您的示例中它是 #element_list_parent

你可以选择：

var events = "mouseenter mouseleave click";

$("#element_list_parent").on(events, "img.image_class, .empty_message", function(e){
  //do stuff for event
});

如果您需要识别事件到元素：

$("#element_list_parent").on(events, "img.image_class, .empty_message", function(e){

    if(e.target.className=='image_class'){
         // do something for images
    }else{
         // do else for .empty_message DIV
    }

});

【讨论】：