javascript - JQuery 无法理解事件顺序

Question

我正在尝试创建一个带有两个子菜单的 Bootstrap 下拉菜单。我的问题是，下拉列表是在加载文档后动态创建的，并且不响应我通常如何让它们工作。我通常会如何处理

$(document).ready(function(){
    addItem(); //adds the first instance of the drop down
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(e){
        e.stopPropagation();
        e.preventDefault();
        $(this).siblings().removeClass("open");
        $(this).parent().toggleClass("open");
    });
});

但这显然不适用于动态创建的内容。我在网上其他地方看到这适用于动态内容；

//still has first instance of dropdown, just later in the doc
$(document).on('click', 'ul.dropdown-menu [data-toggle=dropdown]', function(e){
    e.stopPropagation();
    e.preventDefault();
    $(this).siblings().removeClass("open");
    $(this).parent().toggleClass("open");
});

但对于我的一生，我无法弄清楚为什么这不起作用。我看到的是，它将开放类添加到子菜单中，但切换父菜单(不停止传播？)所以，我的问题是，为什么第二个类没有按预期执行，以及如何我做到了吗？

列表结构供引用:

<div class="dropdown open">
  <button id="select0" class="btn new-btn" data-toggle="dropdown" aria-expanded="true">Select Your Item <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a class="sub" data-toggle="dropdown">Item 1</a>
      <ul class="dropdown-menu sub-menu">
        <li><a data-def-cost="6">Item 1.1</a></li>
        <li><a data-def-cost="8">Item 1.2</a></li>
      </ul>
    </li>
    <li><a class="sub" data-toggle="dropdown">Item 2</a>
      <ul class="dropdown-menu sub-menu">
        <li><a data-def-cost="5">Item 2.1</a></li>
        <li><a data-def-cost="3">Item 2.2</a></li>
      </ul>
    </li>
    <li><a data-plu="xyz" data-def-cost="8.00">Item 3</a></li>
    <li><a data-plu="xyz" data-def-cost="8.00">Item 4</a></li>
    <li><a data-plu="xyz" data-def-cost="10.00">Item 5</a></li>
    <li class="dropdown-header">Other Items</li>
    <li><a data-plu="143">Item 6</a></li>
    <li><a data-plu="xyz">Item 7</a></li>
    <li><a data-plu="xyz">Item 8</a></li>
  </ul>
  <input type="text" class="hidden" name="input1">
  <input type="text" class="hidden" name="otherinput1">
</div>

Answer 1

$(this).siblings() 指向 ul 元素，但是，应该将 .open 类添加到父li:http://getbootstrap.com/javascript/#dropdowns-usage .

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.

这是一个建议(受到以下代码片段的启发:Multi-Level Dropdowns):

$(document).ready(function () {
  // this variable keeps track of the last open menus
  // in order to close them when another link is clicked
  // or when the entire dropdown is closed
  var open;
  $("#my-dropdown").on("hide.bs.dropdown", function () {
    if (open) open.removeClass("open");
  });
  $(".dropdown-submenu > a").on("click", function (e) {
    if (open) open.removeClass("open");
    open = $(this).parents(".dropdown-submenu");
    open.addClass("open");
    e.stopPropagation();
    e.preventDefault();
  });
});

.dropdown-submenu {
  position: relative;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="dropdown" id="my-dropdown">
  <button type="button" data-toggle="dropdown">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action 1</a></li>
    <li><a href="#">Action 2</a></li>
    <li class="dropdown-submenu">
      <a href="#">Submenu 1</a>
      <ul class="dropdown-menu">
        <li><a href="#">Action 1.1</a></li>
        <li><a href="#">Action 1.2</a></li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a href="#">Submenu 2</a>
      <ul class="dropdown-menu">
        <li><a href="#">Action 2.1</a></li>
        <li><a href="#">Action 2.2</a></li>
        <li class="dropdown-submenu">
          <a href="#">Submenu 2.3</a>
          <ul class="dropdown-menu">
            <li><a href="#">Action 2.3.1</a></li>
            <li><a href="#">Action 2.3.2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>