5

ajax から動的に作成された要素を使用して、mouseover イベントが .on ハンドラーで機能しない理由を理解しようとして、私は髪を引っ張っています。動作しているように見えるのは .live を使用したコードだけですが、非推奨であることは理解しています。

$(".dropdown ul li").live("mouseover", function() {
alert('mouseover works');
});

ただし、.on を使用しようとすると、どのようなバリエーション (document.ready、.mouseover など) を試しても機能しません。

$(".dropdown ul li").on("mouseover", function() {
alert('mouseover works');
});

イベント ハンドラーはコードの最後にあるため、最後に実行されます。誰かが私が間違っていることを知っていますか??

4

1 に答える 1

21

動的イベント委任http://api.jquery.com/on/.onで新しく生成された要素に使用- メインセレクターが既存の 静的親である場合: 

$(".static-parent").on("event1 event2", ".dynamic-child", function() {

またはあなたの場合：

$(".dropdown").on("mouseover", "li", function() {
   alert('mouseover works!!!!!!!!!');
});

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する必要がある場合はドキュメントのコンテナー要素である可能性があります。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

また、必ずDOM対応関数を使用してください

jQuery(function($) { // DOM is now ready and $ alias secured

    $(".dropdown").on("mouseover", "li", function() {
       alert('mouseover works!!!!!!!!!');
    });

});
于 2012-07-02T06:10:59.737 に答える