title: Event delegation vs direct binding when adding complex elements to a page
body: <p>I have some markup like this (classes are just for explication):</p>
  
  <pre><code>&lt;ol id="root" class="sortable"&gt;
    &lt;li&gt;
      &lt;header class="show-after-collapse"&gt;Top-Line Info&lt;/header&gt;
      &lt;section class="hide-after-collapse"&gt;
        &lt;ol class="sortable-connected"&gt;
          &lt;li&gt;
            &lt;header class="show-after-collapse"&gt;Top-Line Info&lt;/header&gt;
            &lt;section class="hide-after-collapse"&gt;
              &lt;div&gt;Content A&lt;/div&gt;
            &lt;/section&gt;
          &lt;/li&gt;
        &lt;/ol&gt;
      &lt;/section&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;header/&gt;
      &lt;section class="hide-after-collapse"&gt;
        &lt;ol class="sortable-connected"&gt;
          &lt;li&gt;
            &lt;header/&gt;
            &lt;section class="hide-after-collapse"&gt;
              &lt;div&gt;Content B&lt;/div&gt;
            &lt;/section&gt;
          &lt;/li&gt;
        &lt;/ol&gt;
      &lt;/section&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>That is, nested sortable lists. The sortable plugin suffices, however, since each li (hereafter "item") maintains its level, though the inner lists are connected. The items have an always-visible header and a section visible when in expanded state, toggled by clicking the header. The user can add and remove items from either level at will; adding a top-level item will include an empty nest list inside it. My question is with respect to JS initialization of the newly created item: While they will share some common functionality, which I can cover via</p>
  
  <pre><code>$("#root").on("click", "li &gt; header", function() {
    $(this).parent().toggleClass("collapsed");
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>li.collapsed section {
    display: none;
  }
  </code></pre>
  
  <p>(Side question: would this be an appropriate place to use the details/summary HTML5 tags? It seems sort of iffy about whether those will even make it into the final spec, and I want a sliding transition, so it seems like I'd need JS for that anyway. But I throw the question to the masses. Hello, masses.)</p>
  
  <p>If the root list is the only (relevant) element guaranteed to be in existence at page load, for .on() to work effectively, I have to bind all the events to that element and spell out the precise selector for each, as I understand it. So, for example, to tie separate functions to two buttons right next to each other, I'd have to spell out the selector in full each time, &agrave; la</p>
  
  <pre><code>$("#root").on("change", "li &gt; section button.b1", function() {
    b1Function();
  }).on("change", "li &gt; section button.b2", function() {
    b2Function();
  });
  </code></pre>
  
  <p>Is that accurate? That being the case, does it make more sense to forgo .on() and bind my events at the time the new item is added to the page? The total number of items will probably number in the dozens at most, if that makes a difference in the response.</p>