我有一些這樣的標記（類只是為了說明）：<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>也就是說，嵌套可排序列表?？膳判虻牟寮妥銐蛄耍驗楸M管內部列表已連接，但每個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（）并綁定我的事件是否更有意義？如果響應有所不同，則項目總數最多可能會打幾十個。