ajax呼び出し後のjquery、同じIDのイベントが動作しなくなった

Question

これはバグかこれを行うとは思わないかどうかは不明です。

本体を動的に読み込むサイドバー付きのページがあります。

ページ1では、初期ロード時に機能する要素＃id1のコールバックがあります。

ユーザーがページ2に移動すると、メインコンテンツは＃id1の要素を持つpage2のコンテンツに置き換えられ、同じ目的を果たします。イベントもここで初期化されます。

問題は、ページ2のすべてが＃id1に関連付けられたイベントを除いて動作することです。

ページ1に戻ると、＃id1もうまくいきません。

コンソールを見た後、$（ "＃id1"）を呼ぶと時には初期ロード要素（破棄されない？）が与えられることがわかりました。これはおそらく理由でしょう。

AJAX負荷は、単に使用：

$に.get（パス、関数（データ）{$（） '＃主' HTML（データ）}）。

ここで何が起こっているのでしょうか？

古い要素が「jqueryで適切に破棄されていない」場合は、ここで何が行われると考えられますか？

Answer 1

それはあなたが結合しているまさに明確ではないですが、解決策は、あなたが実行時にDOMにない要素にバインドすることを確実にするために（あなたのjQueryのバージョンによって異なります）live()またはon()を使用することです。

のjQuery 1.7以降：on()

$(document).on('click', '.selector', function() { ... }); 

jQueryの< 1.7：live()

$('.selector').live('click', function() { ... }); 

Answer 2

あなたは何の要素を知らないのでIDだけ

一度発生することを忘れないでくださいIDはまだDOMの中に住んでいる可能性がありますあなたはAjaxコールをclassnameの代わりに使うべきです。

jQueryの.live()を使用すると、動的にロードされた要素にバインドできます。

Answer 3

これには動的IDを生成する必要があります。右のバーオプションをクリックすると、idが生成され、body要素の "id"タグにidが格納されます。どのIDがどのページに対して生成されているか分かります。 "onclick"イベントでjavascript関数を呼び出し、この関数にそのidを渡してからbody要素を$("#id"+that generated_id).something;として呼び出します。 これは役に立ちます。