停止對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();
    });
  });

有人知道為什么嗎？