私は WordPress で自分のポートフォリオ Web サイトを構築しており、プラグインを使用せずにコードのほぼ全体を書いています。 Web サイトのホームページには動的な「カスタム投稿タイプ」グリッドが付属しており、投稿の分類/カテゴリに基づいて Ajax フィルターを実装し、フィルターに基づいて投稿を並べ替えました。スクリプトは script.js で実行されます:
リーリーまた、以下に示すように、カーソルを追跡し、ホバーすると投稿タイトルを表示するカスタム ツールチップも実装しました。これは、ホームページのタグ間で実行される php ファイルです:
リーリーそして、投稿グリッドのクエリ (「animated-cursor」クラスと data-cursor-title が関連するプロパティです):
リーリー問題: Ajax フィルターを使用した後、要素のホバー時にカスタム カーソル ツールチップが機能しません。ページの読み込み後はすべてが計画どおりに正常に動作しますが、Ajax はまったく実行されません。
私の知る限り (私は php、ajax、js の初心者です)、私のスクリプトはページの読み込み時に準備された要素にのみアクセスできます。 Ajax呼び出し後にスクリプトを機能させようとしていますが、それを回避する方法が見つかりません。誰か何か提案はありますか?複雑なことはないだろうと思っていました。
＃＃＃ありがとう！
P粉3230507802024-01-30 10:14:25
問題は、JavaScript が既存の DOM にバインドされており、これは最初のレンダリングで有効であるということです。 ただし、ajax 呼び出しの後、新しい DOM が HTML に追加されます。新しい DOM には機能がバインドされていないため、ホバーは機能しません。
解決策は、イベントを DOM 自体にバインドしないことです。イベントリスナーを親アノテーションまたはページ本体にバインドできます。 例えば＃＃＃ リーリー