完全なajax生成アプリケーションを生成するかなり大きなjavascriptクラスがあります。ajaxページの1つのバージョンには、いくつかのドロップダウンメニューがあります。これらのメニューは、アプリケーションのライフサイクル中のさまざまな時点で作成および破棄される可能性があります。
これは私が見る振る舞いです:
ユーザーがページバージョン1を開きます:ドロップダウンなしユーザーはページバージョン2に移動します:jQueryonchangeイベントで追加されたドロップダウン。意図したとおりに動作します。ユーザーがページのバージョン1に戻り、ドロップダウンが削除されます。ユーザーがページのバージョン2に戻り、ドロップダウンが(同じ要素IDを使用して)再度追加されると、ドロップダウンに「double」イベント処理が追加され、変更ごとにイベントがトリガーされます。
私が苦労している行動は次のとおりです。
最初のページの読み込み時に、onchangeイベントを追加します。
function myClass(){
//Initiate once for current and future elements.
jQuery(document).on('change',".mydropdowns",
function(e){
self.submitDescriptionChange(this);
}
);
}
myClass.prototype.submitDescriptionChange = function (el){
doSomeAjaxStuff();
}
これは正常に機能しますが、ユーザーがページバージョン1に移動してページバージョン2に戻るたびに、イベントが乗算されます。非常に迅速に、変更イベントごとに20回イベントが発生する可能性があります。この場合、20回のajax呼び出しが作成されます。
論理的には、jQuery.off()を使用することで、これを回避できるはずです。ただし、代わりに発生するのは、イベントが過去と将来の両方の要素から削除されることです。つまり、ページバージョン2を再作成すると、ドロップダウンが機能しなくなります。
これを試した(そしてLOADSを試した)すべての方法で、イベントが発生しないか、複数のイベントが発生することになります。イベントが一度だけ発生する要素を追加/置換する方法が見つからないようです。
これをどのように解決できるかについてのアイデアはありますか?
更新しました
ええ、それで私は問題を誤診したことがわかりました。これは、実際には、onchangeイベントを再バインドするのではなく、「hashchange」イベントを繰り返し再バインドすることから発生しました。方向を間違えたことをお詫びします。bind()関数を、一度だけ実行される場所に移動すると、問題が修正されました。