jquery - ajax後に関数が機能しない

Question

重複の可能性：
ajax呼び出し後のjquery bind関数とトリガー

    $('.chatr').mouseover(function() {
    $('#'+this.id+" .action").removeClass('dn');
    });

ページが読み込まれると関数は機能しますが、ajax を介して新しいコンテンツが読み込まれると、新しい div の関数が機能しません。

score 2 · Accepted Answer

デリゲートを使用する必要があります。

$(document).on('mouseover', '.chatr', function() {
    $(this).find('.action').removeClass('dn');
});

ただし、すべての要素のコンテナがある場合は、.chatr代わりにそのコンテナの ID を使用しますdocument。

score 1 · Accepted Answer

これは、ページの読み込み時にイベントがフックされるためです。特定の.chatr要素はロード後に追加されるため、デリゲートイベントハンドラーと呼ばれるものを使用する必要があります。これを試して：

$(document).on('mouseover', '.chatr', function() {
    $('#' + this.id + " .action").removeClass('dn');
});

documentコンテンツが追加されている最も近い静的な親要素に置き換える必要があることに注意してください。

score 0 · Accepted Answer

jQuery イベントハンドラーは、コードの実行時に存在する要素にのみバインドされます。そのコードが実行された後に追加された要素は、セレクターの基準を満たしている場合でも、イベントハンドラーが自動的にバインドされることはありません。解決策はイベント委任です:

$(document).on('click', '.chatr', function(e) {
    $('#'+this.id+" .action").removeClass('dn');
});

.on()理想的には、最も近い静的な祖先要素 (つまり、常に存在し、イベントをトリガーする要素を常に含むもの) で関数を呼び出す(そしてイベントハンドラーをバインドする) document. ただし、HTML を見なければ、どの要素であるべきかを知ることは不可能です。

score 0 · Accepted Answer

これは、動的に作成された要素では機能しません。これは、最初のページの読み込み後に新しく追加された要素に対してイベントハンドラーバインドが削除され\設定されていないためです。

あなたができることは、イベントリスナーを '.chatr' div の親要素に追加し、$(event.target).hasclass('chatr') を介してチェックして、イベントが発生するかどうかを判断することです

4 に答える 4