35

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”会出现在跨度中，而无需实际单击按钮，但事实并非如此。

我e.delegateTarget在处理程序内部使用，因为.ouput除了.container. 这就是我首先使用委托事件处理程序的原因。

更新：

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

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

4

5 回答 5

61

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

于 2012-10-04T09:46:49.380 回答
2

我知道，这个问题很古老，但是当我在寻找另一个问题的答案时绊倒了它时，我想我不妨在这里分享我稍微简单的方法。

这个想法是直接在所需的目标元素上创建事件：$(target_selector).trigger(event_type)或者 - 对于像“click”这样的标准事件甚至更短 - 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>

于 2019-06-12T08:05:27.577 回答
1

我们可以传递一个附加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.`);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="click-me">Click Me</button>

祝你好运...

于 2018-10-03T08:43:40.373 回答
0

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

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

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

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

这是来自 API 的引用：

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

于 2012-10-04T10:00:49.677 回答
0

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

(function( $ ){
    $.fn.triggerParent = function (eventName, parent) {
        this.each(function() {
            var event = jQuery.Event(eventName);
            event.target = this;
            $(parent).trigger(event);
        });
    };
})( jQuery );
于 2018-08-16T11:37:56.927 回答