title: Deferred JQuery event trigger
body: <p>I have a custom JQuery event like this <code>$element.trigger('customEvent1')</code></p>
  
  <p>Since the event handler might consist of user input (example like confirm dialog where user choose to proceed or abort), I need to wait for the event handler to finish. There might also be multiple event handler for this <code>customEvent1</code>.</p>
  
  <p>How can I use deferred to wait for all event handler to finish?</p>
  
  <p>So far I've tried this</p>
  
  <pre><code>$.when($element.trigger('customEvent1')).then(userActionCallback)
  </code></pre>
  
  <p>In the subscriber</p>
  
  <pre><code>$(document).on('customEvent1', '#element', function(evt) {
     var deferred = $.Deferred();
     //user dialog Yes to resolve and No to reject
     return deferred.promise();
  });
  </code></pre>
  
  <p>But it does not wait for the user input. Thanks for  your help.</p>
  
  <p>For the note, the trigger and subscriber / event handler in not in the same document.</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>As suggested I've tried this</p>
  
  <pre><code>$.when($element.triggerHandler('customEvent1')).then(userActionCallback);
  </code></pre>
  
  <p>For the Listener</p>
  
  <pre><code>$element.on('customEvent1', function(evt)
     var deferred = $.Deferred();
     //user dialog Yes to resolve and No to reject
     return deferred.promise();
  });
  </code></pre>
  
  <p>This works well. But how about if I'm using</p>
  
  <pre><code>$.when('customEvent1').then(userActionCallback);
  </code></pre>
  
  <p>How should I make the listener to be deferred?</p>