on（）を使用して、動的に作成される要素にイベントハンドラをアタッチします。

Question

live（）が推奨されないため、on（）に問題があります。

これは動作していないよう：

$('body').on("click", ".myButton", console.log("clicked")); 

私はページを更新すると、コンソールはすぐに私は何もクリックされていないにもかかわらず、「クリックした」と言うが、私は実際にクリックしたときに発生しません。それ。

また、これはBODYの巨大なスコープではなく、ボタンが入っているDIVにこれを適用する方が効果的です。これは本当ですか？

Answer 1

$('body').on("click", ".myButton", function() { 
    console.log("clicked") 
}); 

Answer 2

あなたが実際にその行にconsole.logを呼び出しているために表示されている奇妙な動作です。それを関数にラップする必要があります。

function() { console.log('clicked'); } 

Answer 3

$(function(){ 
    $('body').on("click", ".myButton",function(){ 
     alert("clicked"); 
    }); 
}); 

Answer 4

あなたの質問の最初の部分は十分に他の回答で回答されています。後で呼び出すことができる関数への参照を渡すのではなく、console.log()関数を呼び出していました。誰もがまだ対処していない、あなたの質問の後半部分に答えるために

：

をはい、それはむしろ使用$('body')よりもボタンの近い祖先にスコープにあなたのイベントハンドラをよりよく実行します。

可能な限りボタンの近くにありますが、イベントハンドラをインストールしたときに静的に存在する（後で動的に破棄されたり作成されたりしない）ボタンの祖先を選択する必要があります。 .live()が.on()のために廃止されたことを

一つの主な理由は、.live()documentオブジェクトにと忙しいページ内のすべてのそれのイベントハンドラを入れ、documentオブジェクトに委任されたイベントハンドラのLOTがあり得ることです。これが発生すると、単一のイベントがすべてdocumentオブジェクトまで泡立てられ、すべての単一のイベントを、可能な委任イベントハンドラの長いリストと比較する必要があります。これは通常、セレクタ操作とeventTargetの実行を意味するため、実際には遅くなる可能性があります。

一方、目的のeventTargetにはるかに近い祖先オブジェクトを選択すると、はるかに小さいオブジェクトリストからのはるかに小さいリストのリストがこの特定の委任イベントハンドラとイベント全体に流れますシステムのパフォーマンスは向上します。

多くのイベント/オブジェクトで最高のパフォーマンスを得るには、委任イベントハンドラをターゲットオブジェクトのできるだけ近くに適用する必要があります。