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
,因为除了.container
中的某个位置外,.ouput
元素与按钮之间不存在已知关系。这就是我首先使用委托事件处理程序的原因。
更新:
我还使用了triggerHandler
,因为这个事件在我不想触发的真实代码中有一个默认行为。(在实际代码中,该事件是Bootstrap Modal plugin的自定义事件hide
,但我实际上并不想在页面加载时触发事件处理程序时隐藏该模式)。
我可以将处理程序提取到一个命名函数中并直接调用它,但由于使用了e.delegateTarget
,这将使how构造更加复杂。
发布于 2012-10-04 17:46:49
您可以手动创建一个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);
发布于 2019-06-12 16:05:28
我知道,这个问题很古老,但当我在寻找另一个问题的答案时结结巴巴地发现了这个问题,我想我不妨在这里分享我稍微简单一点的方法。
这个想法是简单地直接在所需的目标元素上创建事件:点击或者-甚至更短的标准事件,如“$(target_selector).trigger(event_type)
”- do $(target_selector).click()
,请参见下面的小提琴:
$(function(){
$('.container').on('click','button',function(){
console.log('delegated click on '+$(this).text());
return false;
});
$('#other').click(e=>$('.container button').trigger('click'));
$('#clickone').click(e=>$('.container .one').click());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="container">
<button type="submit" class="one">click 1</button> and another chance to click here on <button class="two">click 2</button>.
</form><br>
<div id="other">Trigger clicks on both buttons here!</div><br>
<div id="clickone">Trigger a click on button "one" only.</div>
发布于 2018-10-03 16:43:40
我们可以将一个额外的event configuration
作为second argument
传递给jQuery's $.Event()
。更多信息here。
$('#click-me').on('click', function(evt){
$(document).trigger($.Event('custom-click', {target: evt.currentTarget}));
});
$(document).on('custom-click', '#click-me', function(evt){
alert(`${evt.type} was triggered on button with ${evt.target.id} id.`);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click-me">Click Me</button>
祝你好运。
https://stackoverflow.com/questions/12724147
复制相似问题