jQueryは、最初にバインドする動的イベントを強制します。

Question

私はそれらを動的にするためにdocument要素にイベントをバインドします。

これらのイベントは、要素に直接バインドされたAFTERイベントを実行するという問題があります。

最初に実行する要素をバインドするコードがありますが、動的コンテンツでは機能しません。非動的コンテンツに使用するコードは次のとおりです。

この機能は、.fn.extendにあります。

私が前に述べたように、ドキュメント変数にバインドされた動的コンテンツに対して、同じことをしたいと思います。例えば...

$(document).on("click", "div", function(){}); 

私はこれが真上コードの後に​​実行したい：@epascarelloコメントに書い同様

$("div").on("click", function(){}); 

Answer 1

：

これができない、あなたがする必要があります別の何かを考え出す。

回避策は、コードのロジックを回避する必要があります。いずれにしても、私はあなたに、イベントを却下するために何が起こるべきであるかの証拠を作成するだけの悪いコードを「私に言わせてください」と提案します。

パラメータを追加するには.trigger()メソッドを使用し、無限ループを回避するにはevent.stopPropagation()を使用します。

現在の要素にクリックイベントハンドラがあり、イベントを再度トリガする場合、委譲されたイベントでテストします。

$('#btn').on('click', function(e) { 
 
    $(document.body).append($('<div/>', {text: 'CLICK ME: NEW DIV'})); 
 
}); 
 

 
$("div").on("click", function(e, fromInner){ 
 
    // revert event bubling.... 
 
    if (fromInner == undefined) { 
 
     return; 
 
    } 
 
    e.stopPropagation(); 
 
    //normal code......... 
 
    console.log('Normal click event'); 
 
}); 
 

 
$(document).on("click", "div", function(e) { 
 
    // revert event bubling.... 
 
    if ($._data(this).events != undefined && $._data(this).events[e.type] != undefined) { 
 
     $(this).trigger('click', ['fromInner']); 
 
    } 
 
    console.log('Delegated Click'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button type="button" id="btn">Add new DIV</button> 
 
<div>CLICK ME</div>

Answer 2

あなたはそれだけでコンテナへ出ターゲット要素から作品イベントバブリングを使用し、jQueryのイベントの代表団でこれを行うことはできません。しかし、プレーンなJavaScriptのaddEventListener()メソッドは、のキャプチャをサポートしています。これは反対方向です。オプションの第3引数を使用して、イベントリスナーのキャプチャモードを有効にすることができます。 Event Bubbling and Capturingを参照してください。

だから私はあなたが書くことができるはずだと思う：イベントは、直接要素にバインドした後

document.addEventListener("click", function() {...}, true);