有没有办法用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/)
我期待这将工作,文本“你好”将出现在跨度,而实际上没有点击按钮,但它不会。
我在处理程序中使用e.delegateTarget,因为.ouput元素将不是与按钮的已知关系,除了.container中的某个位置。这就是为什么我第一次使用委派的事件处理程序。
更新:
还有我使用triggerHandler,因为事件有一个默认行为在真正的代码我不想触发。 (在实际代码中事件是Bootstrap Modal plugin的自定义事件隐藏,但是我实际上不想在页面加载时触发事件处理程序时隐藏模态)。
我可以提取处理程序到一个命名的函数,并直接调用它,但由于使用e.delegateTarget,这将使构造更复杂。
解决方法
您可以手动创建一个Event对象,并相应地设置目标属性来欺骗jQuery来考虑事件冒泡。
var c = $('#container');
c.on('click',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/