如何使用jQuery手动触发委托事件？

Question

有没有办法用jQuery手动触发委托的事件处理程序？

请参考以下示例代码:

<div class="container">
  <input type="button" value="Hello">
  <span class="output"></span>
</div>
?
<script>
  $('.container')
    .on('click', '[type=button]', function(e) {
      $(e.delegateTarget).find('.output').text($(this).val());
    })
    .find('[type=button]').triggerHandler('click');?
</script>

(在线:http://jsfiddle.net/TcHBE/)

我希望这可行,并且文本"Hello"将出现在跨度中而不实际单击按钮,但事实并非如此.

我e.delegateTarget在处理程序内部使用,因为该.ouput元素不会与按钮处于已知关系,除了该处理器中的某个位置.container.这就是我首先使用委托事件处理程序的原因.

更新:

我也在使用triggerHandler,因为事件在我不想触发的实际代码中有默认行为.(在实际代码事件是自定义事件hide中的引导模态插件,但我其实不愿意触发页面加载事件处理函数时隐藏模式).

我可以将处理程序提取到一个命名函数中并直接调用它,但是由于使用它e.delegateTarget,这会使构造更复杂.

Answer 1

您可以手动创建一个Event对象并相应地设置该target属性,以欺骗jQuery认为该事件冒泡了.

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/