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”会出现在span中,而不需要实际单击按钮,但它没有。
我在处理程序中使用e.delegateTarget
,因为.ouput
元素与按钮的关系并不已知,而只是在.container
中的某个位置。这就是我首先使用委托事件处理程序的原因。
更新:
另外,我使用triggerHandler
,因为事件在我不想触发的真实的代码中具有默认行为。(在真实的代码中,事件是Bootstrap Modal插件的自定义事件hide
,但实际上我并不想在页面加载时触发事件处理程序时隐藏模态)。
我可以将处理程序提取到一个命名函数中并直接调用它,但由于使用了e.delegateTarget
,这将使how构造更加复杂。
5条答案
按热度按时间lrl1mhuk1#
您可以手动创建一个Event对象,并相应地设置
target
属性,使jQuery认为事件冒泡。http://jsfiddle.net/PCLFx/
ilmyapht2#
我知道,这个问题很古老,但当我在寻找另一个问题的答案时,我想我不妨在这里分享我稍微简单的方法。
我们的想法是直接在所需的 * 目标元素 * 上创建事件:
$(target_selector).trigger(event_type)
或-甚至更短的标准事件,如“点击”-做$(target_selector).click()
,见我的小提琴下面:jv2fixgn3#
我们可以传递一个额外的
event configuration
到jQuery's $.Event()
作为second argument
。更多信息here .祝你好运...
ryevplcw4#
.on()
方法中的选择器是可选的。当你写:
您正在告诉事件处理程序只侦听容器内的按钮单击。
$(e.delegateTarget)
只是对外部容器的引用。我更新了your fiddle to echo this。
这是一个报价from the API:
当提供选择器时,事件处理程序被称为委托。当事件直接发生在绑定元素上时,不调用处理程序,而只对匹配选择器的后代(内部元素)调用处理程序。jQuery将事件从事件目标冒泡到处理程序所连接的元素(即,从最里面到最外面的元素),并为任何与选择器匹配的元素沿着路径运行处理程序。
0x6upsns5#
作为对@Prinzhorn的回答的补充,使用这个JQuery函数可能很有用: