title: How to handle a delegated event for child elements only?
body: <p>When delegating events using <code>.on</code> how do I target child elements:</p>
  
  <p>I have tried: <code>childSelector =</code></p>
  
  <ul>
  <li><code>&gt;*</code></li>
  <li><code>&gt;:nth-child(n)</code></li>
  </ul>
  
  <p>But nothing is selected when I start with <code>&gt;</code>.</p>
  
  <pre><code>$(selector).on(event, childSelector, handler);
  </code></pre>
  
  <p>Sometimes I want to target a direct child, sometimes I don't: (pseudo code)</p>
  
  <pre><code>var func = function(selector, subSelector) {
      $(selector).on("click", subSelector, function() {
          alert("my subSelector is clicked");
      });
  }
  
  func("#wrapper", "direct-child-selector");
  func("#wrapper", ".some .other &gt; .selector:first");
  </code></pre>
  
  <p>Thats why I'm asking for a selector and not a fix.</p>