title: Prevent, then re-trigger a javascript event?
body: <p>I've got an event handler set on <code>document</code>, listening for <code>submit</code> and <code>change</code> events, delegated to any <code>form</code> elements on the page. The idea is to update the server when an input is altered (since the event bubbles up to the form), while also allowing for submitting an entire form. I have a few overrides in place for inputs that need special handling, and this works great (since they're placed higher up in the code, I can block the main event handler with <code>.stopImmediatePropagation()</code> - all these handlers are on <code>document</code>.)</p>
  
  <p>What I'm trying to do now is intercept the <code>change</code> event on a specific input, then instead of preventing, I want to re-trigger the primary handler, passing in some additional data (using jQuery's <code>.trigger(event, [data])</code> syntax.)</p>
  
  <p>To give a simplified example: <a href="http://jsfiddle.net/rrEmq/3/" rel="nofollow">http://jsfiddle.net/rrEmq/3/</a></p>
  
  <p>My goals are to:</p>
  
  <ul>
  <li>Maintain delegated events (the forms are loaded in dynamically, the JS is loaded once)</li>
  <li>Avoid duplicating code</li>
  <li>Avoid breaking out the main handler's functionality into separate functions</li>
  </ul>
  
  <p>That third item is my initial approach, and I understand that it will get the job done, but I'd love to find a way to solve this without rewriting the main handler. Obviously, the real kicker is that, since everything's delegated to the same element, and since I'm using <code>e.target</code>, I can't simply trigger a handler higher up in the DOM tree.</p>