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

以上内容从它们各自的所有子元素中监听变化。它工作正常，但等式中还缺少一件事。txt-b 和 txt-c 更改事件不关我的事。因此，我不能将它们包含在更改事件侦听器正在执行的操作中。此外，3 DIV 下的每个元素都已经有自己的更改监听器，因此将监听器添加到每个元素的更改事件是最后的选择。

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

到目前为止，我做了以下没有用的操作：

  1. 我尝试分离三个 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

你可以用一个处理程序来做到这一点..

<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 回答
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'))

不建议使用 not 选择器，但如果您想使用 :not 选择器本身，请尝试$("div").children("input :not(#txt-b)").change(function(){ //... });单独使用子元素，而不是父子元素的父子元素

于 2012-07-29T12:34:40.010 回答