カスケードドロップダウン - オプションを操作するためにドロップダウンで変更イベントを一時的に無効にする方法

Question

jqueryのカスケードドロップダウンを作成しました。ユーザーに「バックアップ」をさせ、以前のドロップダウンを再選択できるようにする機能を追加しました。これにより、次のドロップダウンがリロードされ、後続のドロップダウンがクリアされ、無効になります。

http://jsfiddle.net/goodeye/gA6GZ/

問題が通じ初めては、選択要素の変更イベントがバインドされた後であるので、私は、新しい値をリロードすると、後で変更イベントが発火する原因だと思います。

連鎖する代わりに.change（）バインドを分離しました。私はこれまで、選択オプションをロードする前にチェインしていました。これは最初の時間を助けましたが、その後の時間は助けませんでした。この問題については

、私は特にこの順序に良い方法を探しています：

• 回避の変更（）
• ドロップダウン
• が変化（）

を設定更新

この質問： Best way to remove an event handler in jQuery? は、主な回答としてunbind（）を持っています。その後、live（）を使用する次の回答です。 live（）アプローチは、私を少し混乱させるクラスを使用し、多くの投票を取得しませんでした。

再現する：
手順1を選択します。手順2を参照してください。
手順2を選択し、手順3の火災を参照してください。
手順1をもう一度選択し、手順2の火災を参照してください。
問題が始まる：
ステップ2を選択し、ステップ3を参照してください。
手順3を選択し、手順4を参照して3回発火します。
手順1をもう一度選択し、手順2の2回の実行を参照してください。
など
さらに悪化します。私はステップ3の火を5回見ます。

いくつかの詳細：実際のコードで

、JSONのAJAX呼び出しからこれらのロード。私はこの例から削除し、ハードコードされたオプションを追加してシミュレートしました。これをイベントの問題に限定しています。

これはサーバー側から開始されるため、最初のドロップダウンはすでにHTML内にあります。次の3つは、（シミュレートされた）json呼び出しからロードされます。

これらは、実ページにこれらのドロップダウンの複数のセットがあるため、識別のためのクラスを使用します。コードは$（this）を使用して、選択された1つのセット内で作業するように注意します。

オプションが1つだけの場合は「自動選択」し、次のオプションに移動する機能もあります。このコードはこの中にありますが、シミュレートされた例には、この問題のこの問題を回避するために、複数のオプションがあります。

あなたのアイデアを事前におねがいします！

Answer 1

まあ、私は時間を使い果たし、それを解決しなければなりませんでした。一度バインディングを設定するだけでした。それはすべてそれにあったのです。これは問題を解決し、この場合にはバインド解除/再バインドやlive（）の使用を必要としませんでした。

一度前に次のコードを実行してください。ドロップダウンを一度バインドし、カスケードが最初の呼び出しを呼び出すまで2番目、3番目、4番目を無効にします。バインディングは1回だけ実行され、無効化されたtrue/falseはトグルされます。

$('.ddStep1').change(getStep2); 
$('.ddStep2').change(getStep3).attr('disabled', true); 
$('.ddStep3').change(getStep4).attr('disabled', true); 
$('.ddStep4').attr('disabled', true); 

（。このアプリケーションでは、最後のドロップダウンが変更イベントを持っていない。第四が選択された後、別の送信ボタンがあります）

問題は、バインディングを作成するための複数の呼び出しでした - これは1回限りであるため、複数回呼び出すと、changeイベントに複数の呼び出しが追加されていました。

選択オプションの追加と削除で、変更イベントが呼び出されていませんでした。元の質問に答える

約一時的に（私の問題の解決策ではないが）イベントを無効にし、私はこの回答から）（住んで使用して理解して手に入れた、そしてそれが進むべき道だと思う： Best way to remove an event handler in jQuery? 名前空間を使ったその質問への他の答えもまともです。

Answer 2

あなたができることは、要素上のすべてのバインドされた変更イベントを検査し、それらを「オフライン」配列に保ち、バインドを解除し、あなたのものを行い、それらを再バインドすることです。あなたが使用できるすべてのバインドの変更イベントを検査する

：

var changeEvents = $(element).data("events").change; 
jQuery.each(changeEvents, function(key, handlerObj) { 
    alert(handlerObj.handler) // alerts "function() { alert('changed!') }" 
    // also available: handlerObj.type, handlerObj.namespace 
})