如何使用jQuery手动触发委托事件？
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构造更加复杂。
回答 4
Stack Overflow用户
发布于 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);Stack Overflow用户
发布于 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>
Stack Overflow用户
发布于 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
复制相似问题