検索

ホームページ >ウェブフロントエンド >jsチュートリアル >UpdatePanel と Jquery_jquery の間の競合の解決策

UpdatePanel と Jquery_jquery の間の競合の解決策

WBOY
WBOYオリジナル
2016-05-16 17:38:361232ブラウズ

初めてページが読み込まれるとき、要素 A の X 効果は正常ですが、B をクリックした後、ページは部分的に更新され、A に戻ると要素 A は X 効果を失います。 >

最初はフロントエンドに問題があるのではないかと思い、プログラマに相談しましたが、注意深く検査した結果、問題がないことがわかりました。その後、ページが ASP.NET AJAX の部分更新を使用していることがわかりました。おそらく JQUERY と競合していることが明らかになりました。

問題の再現: 1. ASP.NET AJAX がページに ScriptManager と UpdatePanel を追加します

2. UpdatePanel に要素 A を追加します
3. jQuery を使用して要素 A に X エフェクトを追加します
4.ポストバック用の UpdatePanel へのボタン B

問題が発生します。

分析 1: UpdatePanel は主に、ページ全体のポストバックを回避するためのアプリケーションの部分更新に使用されます。 UpdatePanel の部分更新の核心は、MicrosoftAjaxWebForm.js ファイルにあります。その部分更新プロセスは、サーバー コードの実行後に、ページをサーバーに送信することによって、UpdatePanel 内の HTML が非同期的に再レン​​ダリングされます。このプロセス中、ページの他の部分の状態は変化しません。

分析 2: jQuery は、簡単なコードを通じて HTML 要素にさまざまな属性とイベント ハンドラーを追加できます。公式ドキュメントは、チュートリアル: jQuery の仕組み

で参照できます。

ここで、jQuery には「ready」という重要なイベント マークがあることがわかります。通常、HTML 要素のエフェクトとイベント ハンドルは、次のようにこのready イベントを通じて追加されます。 $(“p”).text(“DOM がロードされ、操作できるようになりました。”);

これについての公式の説明は次のとおりです。DOM が完全にロードされた後に、ready イベントが 1 回実行されます。この時点で、問題の原因はほぼわかっています。

理由: UpdatePanel が部分的に更新された後、その中の要素 A が書き換えられますが、この時点では DOM ツリー全体が再ロードされないため、jQuery Ready イベントがトリガーされず、そのため要素 A は元の特殊効果を失います。 。

解決策: 次に示すように、ready イベントで実行されたコードを抽出し、ScriptManager の EndRequest イベントをキャプチャすることで、UpdatePanel の部分更新のたびに jQuery 初期化コードを実行できます。