如何使用jQuery手动触发委托事件？

有没有办法用jQuery手动触发委托的事件处理程序？

请参考以下示例代码：

   
 ​  $('.container') .on('click', '[type=button]', function(e) { $(e.delegateTarget).find('.output').text($(this).val()); }) .find('[type=button]').triggerHandler('click');​  

（在线： http ： //jsfiddle.net/TcHBE/ ）

我希望这会起作用，并且文本“Hello”会出现在跨度中，而不会实际点击按钮，但事实并非如此。

我在处理程序中使用e.delegateTarget ，因为除了.ouput中的某个位置之外， .ouput元素不会与按钮处于已知关系。 这就是我首先使用委托事件处理程序的原因。

更新：

我也在使用triggerHandler ，因为事件在我不想触发的实际代码中有默认行为。 （在实际代码中，事件是Bootstrap Modal插件的自定义事件hide ，但实际上我并不想在页面加载时触发事件处理程序时隐藏模态）。

我可以将处理程序提取到一个命名函数中并直接调用它，但由于使用了e.delegateTarget ，这将使构造更复杂。

Answer 1

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

Answer 2

.on()方法中的选择器是可选的。
当你写：

  $('.container') .on('click', '[type=button]', function(e) { $(e.delegateTarget).find('.output').text($(this).val()); }) .find('[type=button]').triggerHandler('click');​ 

您告诉事件处理程序仅侦听容器内的按钮单击。
$(e.delegateTarget)只是对外部容器的引用。

我已经更新你的小提琴来回应这个 。

这是API的引用：

提供选择器时，事件处理程序称为委托。 当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为匹配选择器的路径上的任何元素运行处理程序。

Answer 3

作为@ Prinzhorn答案的补充，拥有这个JQuery函数可能很有用：

 (function( $ ){ $.fn.triggerParent = function (eventName, parent) { this.each(function() { var event = jQuery.Event(eventName); event.target = this; $(parent).trigger(event); }); }; })( jQuery ); 

Answer 4

我们可以将另一个event configuration传递给jQuery's $.Event()作为second argument 。 更多信息在这里 。

 $('#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.`); }) 

  Click Me