1

なぜこれが機能するのですか：

$.ajax(
{
    url: "/some/url.php",
    data: { s:"stuff" },
    success: function(result)
    {
        // Result being <button id="clickme">Click me!</button>
        $("#container").html(result); 

        // Event trigger *in* AJAX
        $("#clickme").on("click", function()
        {
           alert("Hai"); 
        });
    }
});

そして、これはしません:

$.ajax(
{
    url: "/some/url.php",
    data: { s:"stuff" },
    success: function(result)
    {
        // Result being <button id="clickme">Click me!</button>
        $("#container").html(result); 
    }
});

// Event trigger outside AJAX, for better overview, like event grouping, 
// shorter AJAX functions, etc
$("#clickme").on("click", function()
{
    alert("Hai"); 
});

jQuery の使用v1.7.2

4

4 に答える 4

7

まず、onその署名で委任を使用しません。つまり、見つかった要素にイベント リスナーを直接アタッチします。

次に、2 番目のコードは ajax リクエストが行われる前に実行されるため、この時点では要素が見つからず、コードはイベント リスナーをアタッチしません。

で委任を使用する場合on、署名は次のようになります。

$(document).on( "click", "#clickme", function(){

});

最も近い静的な親要素はどこにdocument あるべきdocumentですか - しかし、それも同様に機能します (.live結局のところ、それが機能します) 。

documentいつもあるから安心。しかし、DOM のこの時点で見つけられるより近い静的な親要素がある場合は、むしろそれに委譲することができます。

などが推奨されない理由documentは、ページ上のすべてのイベント"body"の処理オーバーヘッドが追加されるためです。type

検討$(document).on("mousemove", ".myElement", fn);

これで、マウスがページ上で移動するたびに、伝播が下位レベルのリスナーによって停止されない限り、jQuery は伝播パス全体を処理して、伝播パス内の要素が指定された.myElement-selector に一致するかどうかを確認する必要があります。

代わりに を追加した場合$("#element").on("mousemove", ".myElement", fn);、この処理は、ページ上の領域で発生する mousemove イベントに対してのみ行われ"#element"ます。

于 2012-08-09T14:05:21.147 に答える
3

試してみてください

$('body').on("click", "#clickme", function() {
    alert("Hai"); 
});

#clickmeハンドラーをアタッチするときに要素がまだ存在しないため、2番目のスニペットは期待どおりに機能しません

于 2012-08-09T14:04:48.323 に答える
0

2 番目のケースでは、クリック ハンドラを設定しようとしている要素が pageLoad に存在しないためです。

次のように .on() を使用する場合:

$("body").on("click", "#clickme", function()
{
    alert("Hi"); 
});

ページの読み込み時に存在する body タグにイベントを添付すると、#clickme の選択はクリック イベントが発生したときにのみ解決されるため、機能します。

しかし、(パフォーマンスのために) 'body' よりも優れているのは、ページロード時に存在することがわかっている DOM のさらに下にあるコンテナーです。

于 2012-08-09T14:11:56.330 に答える
0

代わりにこれを使用してください：

$(document).on("click", "#clickme", function() { alert("Hai"); });

これはうまくいくはずです。

于 2012-08-09T14:06:49.667 に答える