title: How do I delegate Jquery UI click from image to list item?
body: <p>I have a UL that contains items that the user can click on and move from one list to another.  I have a function to inspect the list item and move it from one list to another and it works well -- except for one problem. </p>
  
  <p>The list item contains an image (which also responds to the click event).  So if my user clicks on the image (essentially a + or - sign that represents add/remove) the function does not work, as the element that it expected as the target is the image, not the list item.  How can I delegate the image click to the li that contains it?</p>
  
  <p>The list item is built using struts2 iterator </p>
  
  <pre><code>        &lt;li class="ui-widget-content" id="&lt;s:property value="userId"/&gt;"&gt;
              &lt;img src="/images/add_16.png" border="0" alt="add"/&gt;
              &lt;s:property value="firstName"/&gt;&amp;nbsp;&lt;s:property value="lastName"/&gt;
          &lt;/li&gt;   
  </code></pre>
  
  <p>I tried this...</p>
  
  <pre><code>$("#ul-available li").delegate("img", "click", function(){
          $(this).click();
      });
  </code></pre>
  
  <p>...thinking that if I click the image I could simply invoke the click event on the list item, but it doesn't work.  Any ideas what I am doing wrong, or any other ideas on how to accomplish this would be much appreciated.</p>
  
  <p>Thanks to any/all replies!</p>