jQuery .onは動的に追加された要素では機能しません

Question

いくつかの機能をテストしていますが、特定の要素（この例ではリンク）に移動するとコンソールに何かが出力されます。

私はこの答えを見てきました - >hereそれが言う「あなたが一度あなたの関数を定義することができ、そしてそれがどの動的に追加された要素のために実行されます」の要素がロードされると

だから私は、このスクリプトはJSましたが、動的に、つまりyoutubeの動画のように、新しく追加された要素にマウスを置くと、このスクリプトは機能せず、コンソール内には出力されません。

$("a").on({ 
    click: function() { 
    console.log('clicked'); 
    }, mouseenter: function() { 
    console.log('enter'); 
    }, mouseleave: function() { 
    console.log('left'); 
    } 
}); 

ここに何か不足していますか？

Answer 1

要素をバインドした方法は、複数のイベントハンドラを同じ要素にバインドするために使用されます。動的に追加されている場合は、イベントの委任に頼らなければなりません。イベントがバインドされたときに存在する親要素にイベントをバインドする場所。

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

$("body").on('mouseenter', 'a', function() { 
    console.log('enter'); 
}); 

$("body").on('mouseleave', 'a', function() { 
    console.log('left'); 
}); 

あなたは結合事象の時点で存在しているaに他の最も近い親とbodyを置き換えることができます。