Question

让我用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它将关闭，但不会显示警告信息。

Answer 1

更改为使用委派的事件处理程序：

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

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

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

如果没有其他更接近的话，

document是最好的默认值。 body有一个错误，所以最好避免并且document 总是存在，因此文档上的委托处理程序甚至不需要在doc ready处理程序中：）

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

1 个答案: