title: jQuery keydown callback listens only on outer <ul> rather than inner <li> element
body: <p>Hey so here is the code demo I made</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;ul contenteditable class="outerList"&gt;
  &lt;li class="innerElement"&gt;Hello&lt;/li&gt;
  &lt;li class="innerElement"&gt;World&lt;/li&gt;
  &lt;li class="innerElement"&gt;Hello World&lt;/li&gt;
  &lt;/ul&gt;
  &lt;script&gt;
      $(".outerList").keydown(function () {
        console.log("I am the outer ul");
      });
      $(".innerElement").keydown(function() {
        console.log("I am an inner element");
      });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is the jsFiddle to run it</p>
  
  <p><a href="http://jsfiddle.net/scrbovyr/" rel="nofollow">http://jsfiddle.net/scrbovyr/</a></p>
  
  <p>Basically I have a content editable UL and I want to catch the enter key and pass in my own custom function. But I need to know which LI element the keydown event was thrown on. And as shown in the demo, I can only seem to tie a keydown event listener (or any event listener for that matter) to the outer UL element. Is there a way to attach the keydown event to each LI? Or is there at least a way to attach it to the UL but still tell which child it came from?</p>
  
  <p>Thanks in advance, let me know if any additional information would help!</p>