title: Control the order triggered click UI events in jQuery
body: <p>I have a <code>&lt;input type="checkbox" /&gt;</code> which has a click handler bound to it via jQuery's <code>.click</code> function. It then performs some calculations depending on its state:</p>
  
  <pre><code>$(':checkbox').click(function () {
      if (this.checked) {
          console.log("ACTIVE");
      } else {
          console.log("INACTIVE");
      }
  });
  </code></pre>
  
  <p>That's all good in the UI, however, in my unit tests, I want to simulate a click on this element and make sure the correct code is run.</p>
  
  <pre><code>$(testElement).click();
  </code></pre>
  
  <p>The problem is that the handler is called <strong>before</strong> the default browser action, and so the values of <code>this.checked</code> are reversed. That is, it doesn't get its <code>checked</code> attribute changed until after my handler runs.</p>
  
  <p>Is there any way around this? Is there a different event I could bind to? Is there a different way to trigger the clicks programmatically?</p>