1

いくつかのフォーム要素を含む3つのDIVのリスナーがあります。

<div id="div-a">
  <input type="text" id="txt-a"/>
  <!-- more elements here -->
  ...
</div>
<div id="div-b">
  <input type="text" id="txt-b"/>
  <input type="text" id="txt-c"/>
  <!-- more elements here -->
  ...
</div>
<div id="div-c">
  <input type="text" id="txt-d"/>
  <input type="text" id="txt-e"/>
  <input type="text" id="txt-f"/>
  <!-- more elements here -->
  ...
</div>

次のように、3つのDIVの変更イベントをバインドしました。

$("#div-a, #div-b, #div-c").change(function(){
  // do something, except if the change happened to txt-b and txt-c
})

上記は、それぞれの子要素のすべてからの変更をリッスンします。それはうまく機能しますが、方程式からもう1つ欠けていることがあります。txt-bおよびtxt-cの変更イベントは私の仕事ではありません。したがって、変更イベントリスナーによって実行されるアクションにそれらを含めてはなりません。また、3つのDIVの下にある各要素には、変更用の独自のリスナーがすでにあるため、要素の各変更イベントにリスナーを追加するのが最後のオプションです。

いくつかの例外を除いて、3つのDIVの子要素からの変更を聞く必要があります。5つの入力タイプを除いて、3つのDIVの子要素が変更されたときに関数を実行する必要があります。

これまでのところ、機能しなかった次のことを行いました。

  1. 3つのDIVを分離して、：not（）セレクターを追加してみました

    $（ "＃div-b：not（＃txt-b）"）。change（function（）{// ...}）;

  2. .not（）の使用

この問題に取り組むための最善の方法を知りたいです。必要に応じて、さらに情報を追加させていただきます。ありがとうございました。

4

3 に答える 3

3

それらのターゲットのIDを確認してから、無視してみてください。

$("#div-a, #div-b, #div-c").change(function(e) {
    var target = e.target;
    if (target.id === "txt-b" || target.id === "txt-c") {
        return;
    }
    //Is not a txt-b or a txt-c
})

http://jsfiddle.net/HGXDT/4/

于 2012-07-29T12:21:53.350 に答える
0

$(this)変数を有利に使用できます。

イベントがタグによって生成されると仮定すると、inputチェックする必要があります

if(!$(this).parent().attr('id')=='div-b')

txt-bとtxt-cのみがdiv-b内にある場合。

そうでなければあなたはただ行くことができます

if($(this).attr('id')!='div-b') && !$(this).attr('id')!='div-b'))

セレクターではないことはお勧めしませんが、それでも、セレクター自体$("div").children("input :not(#txt-b)").change(function(){ //... });ではなく、親が親と子の要素をクラブするのではなく、子供だけでアプローチしてみてください。

于 2012-07-29T12:34:40.010 に答える
0

これは、1つのハンドラーで実行できます。

<div id="controls-wrapper">
   <!--Wrap all your controls and div's here   -->
</div>

それで..

$('#controls-wrapper').delegate('input', 'change', function(e){
  if($(this).parent().is('#div-a')){
     //this input was in #div-a, do something
  }

 // and so on, as your case might need
});

.on()注：の代わりに使用することもできます.delegate()

于 2012-07-29T18:30:49.900 に答える