Question

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

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。

Answer 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
    }

});

删除绑定元素后维护委派事件绑定

1 个答案: