向页面添加复杂元素时的事件委托与直接绑定

Question

我有一些这样的标记（类只是为了说明）：

<ol id="root" class="sortable">

  <li>

    <header class="show-after-collapse">Top-Line Info</header>

    <section class="hide-after-collapse">

      <ol class="sortable-connected">

        <li>

          <header class="show-after-collapse">Top-Line Info</header>

          <section class="hide-after-collapse">

            <div>Content A</div>

          </section>

        </li>

      </ol>

    </section>

  </li>

  <li>

    <header/>

    <section class="hide-after-collapse">

      <ol class="sortable-connected">

        <li>

          <header/>

          <section class="hide-after-collapse">

            <div>Content B</div>

          </section>

        </li>

      </ol>

    </section>

  </li>

</ol>

也就是说，嵌套可排序列表。可排序的插件就足够了，因为尽管内部列表已连接，但每个li（以下称“ item”）都保持其级别。这些项目具有始终可见的标题和在展开状态下可见的部分，可通过单击标题来切换。用户可以随意从任一级别添加和删除项目。添加顶级商品将在其中包含一个空的嵌套列表。我的问题是关于新创建项目的JS初始化：虽然它们将共享一些通用功能，但我可以通过

$("#root").on("click", "li > header", function() {

  $(this).parent().toggleClass("collapsed");

});

和

li.collapsed section {

  display: none;

}

（旁听的问题：这是使用details / summary HTML5标签的合适位置吗？对于这些标签是否甚至可以将其纳入最终规范似乎有些怀疑，我想进行一次滑动过渡，所以似乎我想无论如何都需要JS。但是我把这个问题扔给了大众。你好，大众。）

如果根列表是保证在页面加载时存在的唯一（相关）元素，则.on（）才能有效工作，我必须将所有事件绑定到该元素，并为每个事件拼出精确的选择器，因为明白它。因此，例如，要将单独的功能绑定到彼此相邻的两个按钮上，我每次必须完整拼出选择器，

$("#root").on("change", "li > section button.b1", function() {

  b1Function();

}).on("change", "li > section button.b2", function() {

  b2Function();

});

准确吗？在这种情况下，在将新项目添加到页面时放弃.on（）并绑定我的事件是否更有意义？如果响应有所不同，则项目总数最多可能会打几十个。

Answer 1

我并没有创建许多性能测试，但我认为这样做的目的是在单击链接时显示性能差异百分比。单击更多链接会提供更大的数据集，应该提供更准确的统计平均值，对吗？还是我错过了什么？我还认为.find()在两个测试中使用都很好，因为它不会仅.find()在一个测试中使用，而不会在另一个测试中使用，这会扭曲性能，这就是我相信您的测试存在如此性能差距的原因。&nbsp;