jQuery将更改事件绑定到几个DIV's，但已选定

jQuery bind change event to all children in several DIV's except selected

本文关键字：DIV 几个 事件 绑定 jQuery      更新时间：2024-05-22

我有一个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的子元素的变化。当除5种输入类型外，三个DIV的子元素发生变化时，我需要执行一个函数。

到目前为止，我做了以下没有工作：

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

    $（"#div-b:not（#txt-b）"）.change（function（）{//。。。})；

  2. 使用.not（）

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

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

您只需使用$(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(){ //... });方法，而不是父元素组合父元素和子元素

您可以使用一个处理程序来完成此操作。。

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

相关文章：