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)または、「クリック」などの標準イベントの場合はさらに短くします$(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 に答える