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