Tengo un marcado como este (las clases son solo para explicación):

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

Es decir, listas ordenables anidadas. Sin embargo, el complemento ordenable es suficiente, ya que cada li (en adelante "elemento") mantiene su nivel, aunque las listas internas están conectadas. Los elementos tienen un encabezado siempre visible y una sección visible cuando está en estado expandido, activada haciendo clic en el encabezado. El usuario puede agregar y eliminar elementos de cualquier nivel a voluntad; agregar un elemento de nivel superior incluirá una lista de nidos vacía dentro de él. Mi pregunta es con respecto a la inicialización JS del elemento recién creado: si bien compartirán algunas funciones comunes, que puedo cubrir a través de

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

li.collapsed section {
  display: none;
}

(Pregunta complementaria: ¿sería este un lugar apropiado para usar las etiquetas HTML5 de detalles / resumen? Parece un poco dudoso si esas incluso llegarán a la especificación final, y quiero una transición deslizante, por lo que parece que yo ' De todos modos, necesito JS para eso. Pero lanzo la pregunta a las masas. Hola, masas.)

Si la lista raíz es el único elemento (relevante) garantizado para existir en la carga de la página, para que .on () funcione de manera efectiva, tengo que vincular todos los eventos a ese elemento y deletrear el selector preciso para cada uno, como Yo lo entiendo. Entonces, por ejemplo, para vincular funciones separadas a dos botones uno al lado del otro, tendría que deletrear el selector completo cada vez, a la

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

¿Es eso exacto? Siendo ese el caso, ¿tiene más sentido renunciar a .on () y vincular mis eventos en el momento en que se agrega el nuevo elemento a la página? El número total de elementos probablemente sea de docenas como máximo, si eso hace una diferencia en la respuesta.