javascript - IDで直接アクセスすると、クリック時のjqueryがトリガーされません

Question

私はdust.jsを使用しています（適切なドキュメントがないためにグーグルで調べた後）。最後に、ハイパーリンクを動的に作成することができました。次に、動的に生成されたハイパーリンクにオンクリック機能を提供したいと思います。

function createLink(){

    // register the template loading method with dust now
    var compiled = dust.compile("Hello <a href='#' id='linked'>{name}</a>!", "intro");
    dust.loadSource(compiled);

    dust.render("intro", {name: "Fred"}, function(err, out) {
        console.log(out);
        $("#displayHelloSection").html(out);
    });

}

以下は私のドキュメントの準備です。奇妙なことに、生成されたハイパーリンクをクリックすると、Apple が表示されますが、Orange は表示されません。2番目のonclickが機能しなかった理由を知りたいですか? 違いは、最初のものでは、ドキュメントを使用して ID (「#linked」) を参照しています。2 番目のものでは、ID に直接アクセスしています。

$(document).ready(function() {


    $(document).on('click','#linked',function(e){

     alert("Apple");

    });

    $('#linked').on('click', function() {

       alert('Orange');

    });

});

score 3 · Accepted Answer

次のように指定されたイベントハンドラー:

$('#linked').on('click', function() {

"#linked"このコードが実行された時点で、自分自身をオブジェクトにアタッチしようとします。このコード行の実行時にオブジェクトが存在しない場合、イベントハンドラーは作成されません。

次のようなイベントハンドラ:

 $(document).on('click','#linked',function(e){

委任されたイベントハンドラーです。イベントハンドラはdocument常に存在する要素に関連付けられるため、いつでも関連付けることができます。次に、実際に他の要素で発生したイベントのイベント伝播に依存して要素にバブルアップしdocument、イベントハンドラーがイベントを確認すると、それがどの要素で発生したかを調べて一致するかどうかを確認し"#linked"ます. これにより、"#linked"イベントハンドラーに影響を与えることなく、コンテンツを前後に移動したり、後で作成したりできます。

そのため、イベントハンドラーが必要な動的に挿入されたコンテンツを処理する場合、いくつかのオプションがあります。