Ajax 呼び出し後にスクリプトが適切に実行されない

Question

私は WordPress で自分のポートフォリオ Web サイトを構築しており、プラグインを使用せずにコードのほぼ全体を書いています。 Web サイトのホームページには動的な「カスタム投稿タイプ」グリッドが付属しており、投稿の分類/カテゴリに基づいて Ajax フィルターを実装し、フィルターに基づいて投稿を並べ替えました。スクリプトは script.js で実行されます:

リーリー

また、以下に示すように、カーソルを追跡し、ホバーすると投稿タイトルを表示するカスタム ツールチップも実装しました。これは、ホームページのタグ間で実行される php ファイルです:

リーリー

そして、投稿グリッドのクエリ (「animated-cursor」クラスと data-cursor-title が関連するプロパティです):

リーリー

問題: Ajax フィルターを使用した後、要素のホバー時にカスタム カーソル ツールチップが機能しません。ページの読み込み後はすべてが計画どおりに正常に動作しますが、Ajax はまったく実行されません。

私の知る限り (私は php、ajax、js の初心者です)、私のスクリプトはページの読み込み時に準備された要素にのみアクセスできます。 Ajax呼び出し後にスクリプトを機能させようとしていますが、それを回避する方法が見つかりません。誰か何か提案はありますか?複雑なことはないだろうと思っていました。

＃＃＃ありがとう！

Answer 1

問題は、JavaScript が既存の DOM にバインドされており、これは最初のレンダリングで有効であるということです。 ただし、ajax 呼び出しの後、新しい DOM が HTML に追加されます。新しい DOM には機能がバインドされていないため、ホバーは機能しません。

解決策は、イベントを DOM 自体にバインドしないことです。イベントリスナーを親アノテーションまたはページ本体にバインドできます。 例えば＃＃＃ リーリー