javascript - 停止 twitter bootstrap 下拉菜单的传播

Question

我想防止在单击菜单项后关闭下拉菜单。这是我正在做的事情：

 $(document).ready(function() {
      $(document).on("click", ".dropdown-menu li", function(event){
        debugger; // it stops here though
        event.stopPropagation();
      });
 });

但是在单击任何菜单项后，下拉菜单将关闭。我究竟做错了什么？

PS我必须使用$(document).on("click", ".dropdown-menu li"，因为这个下拉列表是由ajax动态构建的。

Answer 1

如果您在 上绑定处理程序document，则事件将一直向上移动到顶部，并且已经触发关闭菜单的事件处理程序。如果您想在它到达 Bootstrap 处理程序之前捕获它，您需要将处理程序绑定到被单击的元素并阻止它传播。

$('.dropdown-menu li').on('click', ...)

Answer 2

你可以这样写：

$(".dropdown-menu li").on("click", function(event){
 event.stopPropagation();


 });

Answer 3

出于某种原因，只有这个解决方案有效

$(document).ready(function() {
  $(".dropdown-menu").on("click", "li", function(e){
    e.stopPropagation();
    });
  });

有人知道为什么吗？