Question

我有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
})

以上听取了所有子元素的变化。它的工作正常，但是有一点比较缺少。 txt-b和txt-c更改事件不在我的业务范围内。所以我不能将它们包含在由change事件监听器执行的操作中。此外，3 DIV下的每个元素已经拥有自己的更改侦听器，因此将侦听器添加到每个元素的更改事件是最后一个选项。

除了一些例外，我需要听取三个DIV的子元素的变化。我需要在三个DIV的子元素发生变化时执行一个函数，除了5个输入类型。

到目前为止，我做了以下无效的工作：

我尝试分离三个DIV并添加了：not（）选择器

$（“＃div-b：not（#txt-b）”）。change（function（）{ // ... }）;
使用.not（）

我想知道解决这个问题的最佳方法。如果您需要，我很乐意添加更多信息。谢谢。

Answer 1

您可以尝试检查目标的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/

Answer 2

您可以使用$(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(){ //... });，而不是父母使用父母和子女元素

Answer 3

您可以使用一个处理程序执行此操作..

<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()

jQuery将更改事件绑定到几个DIV中除选中之外的所有子项

3 个答案: