小编slk*_*slk的帖子

我有一些像这样的标记(类只是用于解释):

<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;
}

(附带问题:这是一个使用详细信息/摘要HTML5标签的合适位置吗？看起来有点不确定那些是否会进入最终规范,我想要一个滑动过渡,所以看起来我好像无论如何都需要JS.但我把问题提交给群众.你好,群众.)

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

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

那是准确的吗？在这种情况下,放弃.on()并在将新项目添加到页面时绑定我的事件更有意义吗？如果这会对响应产生影响,那么项目总数最多可能是数十个.