0

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

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

問題は、最初の通過後、選択要素の変更イベントがバインドされているため、新しい値をリロードすると、後の変更イベントが発生していると思います。

チェーン化する代わりに、.change() バインドを分離しました。選択オプションをロードする前に、以前はチェーンしていました。これは最初は役に立ちましたが、その後は役に立ちませんでした。

この問題について、私は特にこのシーケンスへの適切なアプローチを探しています:

  • change() を避ける
  • ドロップダウンを更新する
  • change() を設定する

この質問: jQuery でイベント ハンドラーを削除する最良の方法は? 主な回答として unbind() があり、次に live() を使用するための後続の回答があります。live() アプローチは、私を少し混乱させるクラスを使用し、多くの票を獲得しませんでした。

再現するには:
ステップ 1 を選択します。ステップ 2 の発射を参照してください。
ステップ 2 を選択します。ステップ 3 の点火を参照してください。
ステップ 1 を再度選択します。ステップ 2 の発射を参照してください。
その後、問題が発生します。
ステップ 2 を選択します。ステップ 3 の火災を 2 回参照してください。
ステップ 3 を選択し、ステップ 4 を参照して 3 回発射します。
もう一度ステップ 1 を選択します。ステップ 2 の発射を 2 回参照してください。
など
さらに悪化します。ステップ 3 が 5 回発生します。

いくつかの詳細:

実際のコードでは、これらは json ajax 呼び出しからロードされます。例からそれを削除し、ハードコーディングされたオプションを追加してシミュレートし、これをイベントの問題だけに限定しました。

これはサーバー側で開始されるため、最初のドロップダウンは既に html の「内」にあります。次の 3 つは、(シミュレートされた) json 呼び出しから読み込まれます。

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

オプションが 1 つしかない場合は「自動選択」して次のオプションに進む機能もあります。このコードはそこにありますが、この質問でこの問題を回避するために、シミュレートされた例にはすべて複数のオプションがあります。

あなたのアイデアを前もってありがとう！

4

2 に答える 2

0

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

バインドされたすべての変更イベントを調べるには、次を使用できます。

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
})
于 2011-07-17T22:58:17.313 に答える
0

さて、私は時間を使い果たし、それを解決しなければなりませんでした。バインディングを 1 回セットアップするだけで済みました。これですべてです。したがって、これで問題は解決し、この場合、バインド解除/再バインドしたり、 live() を使用したりする必要はありませんでした。

次のコードを前もって実行します。ドロップダウンを一度バインドし、最初の呼び出しからカスケードが開始されるまで、2 番目、3 番目、4 番目を無効にします。そのため、バインドは一度行われ、無効化された true/false が切り替えられます。

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

(このアプリケーションでは、最後のドロップダウンには変更イベントがありません。4 番目が選択された後に別の送信ボタンがあります。)

問題は、バインディングを作成するための複数の呼び出しでした。これは 1 回限りのものであるため、2 回以上呼び出すと、変更イベントに複数の呼び出しがアタッチされていました。

選択オプションの追加と削除は、変更イベントを呼び出していませんでした。

イベントを一時的に無効にすることに関する元の質問に答えて (私の問題の解決策ではありませんが)、この回答から live() の使用を理解することができ ました。 jQuery? 名前空間を使用したその質問に対する他の回答も適切に見えます。

于 2011-07-20T16:22:36.910 に答える