在元素被销毁并再次初始化后再次分配事件答案

【问题标题】：assign event again after element is destroyed and initialized again在元素被销毁并再次初始化后再次分配事件
【发布时间】：2016-11-16 01:25:21
【问题描述】：

让我用 bootstrap-select 举例说明我的意思：

HTML

<a href="#" id="link">Show Select options</a>
<div id="gap"></div>
<a href="#" id="link2">Destroy Select</a>

<div id="searchSelect">
  <select name="searchName" id="idSelect" data-live-search="true" data-size="10">
    <option value="John">John</option>
    <option value="Janet">Janet</option>
  </select>
</div>

JS：

$("#idSelect").selectpicker();

$("#link").click(function(e) {
  e.preventDefault();
  $("#searchSelect").show();
  setTimeout(function () {
     $('#idSelect').selectpicker('toggle');
  });
});

$("#link2").click(function(e) {
  e.preventDefault();
  $('#idSelect').selectpicker('destroy');
  $("#searchSelect").hide();
  alert("Select destroyed");
});

$("#idSelect").on("hide.bs.select", function () {
  alert("onHide fired");
});

第一次运行时，此事件运行良好：

$("#idSelect").on("hide.bs.select", function () {

但是在你销毁元素并再次初始化之后，该事件将不再触发，有没有办法将事件再次分配给元素？

了解我的意思的最好方法是通过：看看JSFIDDLE

点击“显示选择选项”按钮
在下拉菜单外部单击，它将关闭并显示警报消息。
点击“销毁选择”按钮
重复第 1,2 步，它将关闭，但不会显示警报消息。

【问题讨论】：

标签： javascript jquery bootstrap-select

【解决方案1】：

改为使用委托事件处理程序：

  $(document).on("hide.bs.select", "#idSelect", function () {
    alert("onHide fired");
  });

Jsfiddle：https://jsfiddle.net/n1zz8kkw/17/

这通过在不变的祖先上列出事件，然后将过滤器 (#idSelect) 应用于气泡链中的项目，然后将函数应用于导致事件的匹配元素。结果是元素不需要存在，除非在事件时间。

document 是最好的默认值，如果没有其他更接近的话。 body 有一个错误，所以最好避免并且document 总是存在，因此文档上的委派处理程序甚至不需要在文档就绪处理程序中:)

【讨论】：