How do I manually trigger a delegated event with jQuery?

Question

Is there a way with jQuery to manually trigger an delegated event handler? Take following example code: ```

``` (Online: http://jsfiddle.net/TcHBE/) I was expecting that this would work, and text "Hello" would appear in the span without actually clicking the button, but it doesn't. I'm using `e.delegateTarget` inside the handler, because the `.ouput` element won't be in a known relationship to the button, other than some place inside the `.container`. That is why I'm using a delegated event handler in the first place. Update: Also I'm using `triggerHandler`, because the event has a default behaviour in the real code I don't want to trigger. (In the real code the event is the custom event `hide` of the Bo…

Accepted Answer

You could create an Event object manually and set the `target` property accordingly to trick jQuery into thinking the event bubbled up.

```
var c = $('#container');

c.on('click', '[type=button]', function(e) {
    $(e.delegateTarget).find('span').text($(this).val());
});

var event = jQuery.Event('click');
event.target = c.find('[type=button]')[0];

c.trigger(event);
```

http://jsfiddle.net/PCLFx/

How do I manually trigger a delegated event with jQuery?

Solution

Problem