title: event bubbling and delegation of chained events
body: <p>I want to resolve the following situation:</p>
  
  <p>I have a link, which has an on click event (it does some ajax manipulation). The click action is a default Rails which will perform a remote action (execute javascript). I want to call this on click event when the li element is clicked with the following html structure:</p>
  
  <pre><code>&lt;li&gt;
     &lt;img src="images/img.png" /&gt;
     &lt;a href="/remote/path" data-remote="true"&gt;Link&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>The click on li element should trigger on click event on the link and call some other functions (set active class on the li element).</p>
  
  <p>The problem is that:
  1. if I bind click event on li and call click event on link, it will cause an endless loop
  2. if I put a stopPropagation() on a link, it won't call the original function, which performs a remote request</p>
  
  <p>What would be the most elegant solution to this?</p>
  
  <p>Here's the jcode that I currently have:</p>
  
  <pre><code>$(document).ready(function() {
      $("#some_list a").click(function(e) {
          alert("action on a");
          e.stopPropagation();
      });
  
      $("#some_list li").click(function(e) {
          alert("call some function");
          $(this).find('a').trigger("click");
      });
  });
  </code></pre>
  
  <p>This won't cause recursive loop, but it wil prevent the default action that I want to trigger on the link (set by rails or ujs library).</p>
  
  <p>I guess I have to change the order of click actions on a link and stopPropagation() after the last action on the link?</p>
  
  <p>Or maybe there is some better solution with restructuring the HTML and calling the remote function by myself?</p>
  
  <p>Thanks for help</p>