Question

我对Bootstrap中动态创建的下拉列表中的事件有疑问。当动态创建下拉列表时，它不会触发任何事件。

以下是一个简单的演示示例，原始下拉列表触发alert()没有任何问题，但动态附加的下拉列表没有。

HTML

<div class="dropdown">
  <a id="dropdown-original" href="#" class="dropdown-toggle" data-toggle="dropdown">Original Dropdown</a>
  <ul class="dropdown-menu">
    <li>Dropdown content...</li>
  </ul>
</div>
<div id="appendDropdown"></div>
<button id="createDropdown">Create Dynamic Dropdown</button>

JS

$(document).ready(function() {

  $("#createDropdown").click(function() {
    $("#appendDropdown").html("<div class=\"dropdown\"><a id=\"dropdown-dynamic\" href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">Dynamic Dropdown</a><ul class=\"dropdown-menu\"><li>Dropdown content...</li></ul></div>");
  });

  $('.dropdown').on('show.bs.dropdown', function(e) {
    alert('show.bs.dropdown.event occurred!');
  });

});

有什么方法可以使用动态下拉列表中的事件吗？

谢谢！

Answer 1

因为您在创建元素之前注册了事件。

我的解决方案是在创建新元素时重新注册。并且在注册之前不要忘记off事件（它的原因创建元素会多次触发）。

检查我的working fiddle

JS代码

$(document).ready(function() {

  $("#createDropdown").click(function() {
    $("#appendDropdown").html("<div id=\"dropdown-dynamic\" class=\"dropdown\"><a id=\"dropdown-dynamic\" href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">Dynamic Dropdown</a><ul class=\"dropdown-menu\"><li>Dropdown content...</li></ul></div>");

    registerDropdownEvent();
  });
  registerDropdownEvent();
});

function registerDropdownEvent() {
  $('.dropdown').off('show.bs.dropdown');

  $('.dropdown').on('show.bs.dropdown', function(e) {
    alert('show.bs.dropdown.event occurred!');
  });
}

Answer 2

在点击事件中创建下拉列表后创建事件处理程序。

$("#createDropdown").click(function() { $("#appendDropdown").html("<div class=\"dropdown\"><a id=\"dropdown-dynamic\" href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">Dynamic Dropdown</a><ul class=\"dropdown-menu\"><li>Dropdown content...</li></ul></div>"); $('.dropdown').on('show.bs.dropdown', function(e) { alert('show.bs.dropdown.event occurred!'); }); });

Bootstrap中没有动态创建下拉列表的事件

2 个答案:

JS代码