elegação @event vs ligação direta ao adicionar elementos complexos a uma página

Eu tenho alguma marcação como esta (as classes são apenas para explicação):

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

Ou seja, listas classificáveis aninhadas. O plugin classificável é suficiente, no entanto, uma vez que cada li (doravante "item") mantém seu nível, embora as listas internas estejam conectadas. Os itens têm um cabeçalho sempre visível e uma seção visível quando no estado expandido, alternados clicando no cabeçalho. O usuário pode adicionar e remover itens de qualquer nível à vontade; a adição de um item de nível superior incluirá uma lista de ninhos vazia dentro dele. Minha pergunta é com relação à inicialização JS do item recém-criado: Embora eles compartilhem algumas funcionalidades comuns, que posso abordar via

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

li.collapsed section {
  display: none;
}

(Pergunta secundária: esse seria um local apropriado para usar as tags HTML5 de detalhes / resumo? Parece um pouco duvidoso que elas cheguem até a especificação final e eu quero uma transição deslizante, então parece que eu ' eu preciso de JS para isso de qualquer maneira. Mas eu jogo a pergunta para as massas. Olá, massas.)

Se a lista raiz for o único elemento (relevante) garantido que existe no carregamento da página, para que o .on () funcione efetivamente, preciso vincular todos os eventos a esse elemento e especificar o seletor preciso de cada um, como Eu entendo. Assim, por exemplo, para vincular funções separadas a dois botões, um ao lado do outro, eu precisaria digitar o seletor por inteiro toda vez, à la

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

Isso é preciso? Sendo esse o caso, faz mais sentido renunciar a .on () e vincular meus eventos no momento em que o novo item é adicionado à página? O número total de itens provavelmente será o número de dezenas, no máximo, se isso fizer diferença na respost