У меня есть такая разметка (классы только для объяснения):

<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 () работал эффективно, я должен связать все события с этим элементом и прописать точный селектор для каждого, так как я понимать это. Так, например, чтобы связать отдельные функции с двумя кнопками, расположенными рядом друг с другом, мне бы приходилось каждый раз прописывать селектор полностью, а ля

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

Это точно? В таком случае, имеет ли смысл отказываться от .on () и связывать мои события во время добавления нового элемента на страницу? Общее количество предметов, вероятно, будет не более десятков, если это повлияет на ответ.