jQuery是否有办法手动触发委托(delegate)事件处理程序?

请看以下示例代码:

<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内的某些位置之外,与按钮之间没有已知的关系。这就是为什么我首先使用委托(delegate)事件处理程序的原因。

更新:

另外,我正在使用triggerHandler,因为该事件在我不想触发的真实代码中具有默认行为。 (在真实代码中,该事件是Bootstrap Modal plugin的自定义事件hide,但是在页面加载时触发事件处理程序时,我实际上并不希望隐藏模式)。

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

最佳答案

您可以手动创建一个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/

关于jquery - 如何使用jQuery手动触发委托(delegate)事件?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12724147/

10-12 12:21
查看更多