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

<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（以下称为“项目”）都保持其级别。这些项目具有始终可见的标题和处于展开状态时可见的部分，通过单击标题进行切换。用户可以随意添加和删除任一级别的项目；添加顶级项目将在其中包含一个空的嵌套列表。我的问题是关于新创建项目的 JS 初始化：虽然它们将共享一些通用功能，我可以通过

$("#root").on("click", "li > header", function() {
  $(this).parent().toggleClass("collapsed");
});

和

li.collapsed section {
  display: none;
}

（附带问题：这是否是使用 details/summary HTML5 标签的合适地方？关于这些标签是否会进入最终规范似乎有点不确定，我想要一个滑动过渡，所以看起来我会无论如何都需要 JS。但我把这个问题抛给了大众。你好，大众。）

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

$("#root").on("change", "li > section button.b1", function() {
  b1Function();
}).on("change", "li > section button.b2", function() {
  b2Function();
});

那是准确的吗？既然如此，在将新项目添加到页面时放弃 .on() 并绑定我的事件是否更有意义？如果这会对响应产生影响，则项目总数可能最多为几十个。