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

1cosmwyk  于 2023-10-17  发布在  jQuery
关注(0)|答案(5)|浏览(138)

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构造更加复杂。

lrl1mhuk

lrl1mhuk1#

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

ilmyapht

ilmyapht2#

我知道,这个问题很古老,但当我在寻找另一个问题的答案时,我想我不妨在这里分享我稍微简单的方法。
我们的想法是直接在所需的 * 目标元素 * 上创建事件:$(target_selector).trigger(event_type)或-甚至更短的标准事件,如“点击”-做$(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());
});
var btnNo=$(".container button").length;
$("#addbtn").click(e=>$(".container").append($(`<button class="one">button ${++btnNo}</button>`)));
.one {background-color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addbtn">Add a red button</button>
<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 all buttons in the`.container` div.</div><br>
<div id="clickone">Trigger a click on the red (`.one`) button(s) only.</div>
jv2fixgn

jv2fixgn3#

我们可以传递一个额外的event configurationjQuery's $.Event()作为second argument。更多信息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>

祝你好运...

ryevplcw

ryevplcw4#

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

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

您正在告诉事件处理程序只侦听容器内的按钮单击。
$(e.delegateTarget)只是对外部容器的引用。
我更新了your fiddle to echo this
这是一个报价from the API:
当提供选择器时,事件处理程序被称为委托。当事件直接发生在绑定元素上时,不调用处理程序,而只对匹配选择器的后代(内部元素)调用处理程序。jQuery将事件从事件目标冒泡到处理程序所连接的元素(即,从最里面到最外面的元素),并为任何与选择器匹配的元素沿着路径运行处理程序。

0x6upsns

0x6upsns5#

作为对@Prinzhorn的回答的补充,使用这个JQuery函数可能很有用:

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

相关问题