title: selecting the id of a child element of a dynamically created link
body: <p>I am trying to select the id of a <code>&lt;li&gt;</code> element that is being created under another dynamic element, an <code>&lt;a&gt;</code> tag. I cannot seem to get a handle on the id of <code>&lt;li&gt;</code>.  The closest I've got is this:</p>
  
  <pre><code> $("a li:first-child").attr('id');
  </code></pre>
  
  <p>but will only give the id of the first li, not the one that is being clicked.</p>
  
  <p>Here is the script, which I have truncated, because the only the first part is important:</p>
  
  <pre><code>$.each(...
      $("#inventoryDiv").append("&lt;ul id='invList'&gt;&lt;/ul&gt;");                                                
      $("#invList").append("&lt;a href='javascript:void(0);' name='invLink'&gt;&lt;li id='" + this.inventory_id + "'&gt;
  ...
  </code></pre>
  
  <p>and my listener is:</p>
  
  <pre><code>$("#inventoryDiv").on('click','a',function(){
      console.log($("a li:first-child").attr('id');
  }
  </code></pre>
  
  <p>Any thoughts?</p>