I have a listener for 3 DIV's containing several form elements:

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

I bound the change event for the 3 DIV's as follows:

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

The above listens to change from all of their respective child elements. It works fine, but there is one thing more missing from the equation. The txt-b and txt-c change events is out of my business. So I must not include them in the action being performed by the change event listener. Also, each of the elements under the 3 DIV's already have their own listeners for change so adding the listeners to each of the element's change events is a last option.

I need to listen to changes from the child elements of the three DIV's with some exceptions. I need to execute a function when the child elements of the three DIV's change except for 5 input-types.

So far I did the following which did not work:

1. I tried separating the three DIV's and added the :not() selector

   $("#div-b :not(#txt-b)").change(function(){ //... });

2. Using .not()

I would like to know the best possible way to approach this problem. I'd be happy to add more information if you need so. Thank you.

I have a listener for 3 DIV's containing several form elements:

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

I bound the change event for the 3 DIV's as follows:

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

The above listens to change from all of their respective child elements. It works fine, but there is one thing more missing from the equation. The txt-b and txt-c change events is out of my business. So I must not include them in the action being performed by the change event listener. Also, each of the elements under the 3 DIV's already have their own listeners for change so adding the listeners to each of the element's change events is a last option.

I need to listen to changes from the child elements of the three DIV's with some exceptions. I need to execute a function when the child elements of the three DIV's change except for 5 input-types.

So far I did the following which did not work:

1. I tried separating the three DIV's and added the :not() selector

   $("#div-b :not(#txt-b)").change(function(){ //... });

2. Using .not()

I would like to know the best possible way to approach this problem. I'd be happy to add more information if you need so. Thank you.

• javascript
• jquery-selectors
• jquery

• So why not just bind to $("#div-a') alone? – Robin Maben Commented Jul 29, 2012 at 12:24
• 1 @nmenego: If you could tell us what you intend to achieve instead how you have tried to achieve it, maybe we could help you better. – Robin Maben Commented Jul 29, 2012 at 12:29
• @AnkitGautam jQuery fixes "change" to be a bubbling event, so you can catch all descendant inputs' "change" events in one parent element. There is no intention to catch the "change" event on the divs themselves. – Esailija Commented Jul 29, 2012 at 12:33
• 1 I added some ments to clarify some issues of the post. No need to be rude @adeneo. – nmenego Commented Jul 29, 2012 at 12:34
• @AnkitGautam, change events works for div. – nmenego Commented Jul 29, 2012 at 12:34

3 Answers 3

You can try checking the target's id for those and then ignore them:

$("#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/HGXDT/4/

You can just use $(this) variable to your advantage.

Assuming that events are generated by input tag, you just need to check

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

if only txt-b and txt-c will be inside div-b.

otherwise you can just go with

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

not selector is not remended but still if you want to go with :not selector itself try $("div").children("input :not(#txt-b)").change(function(){ //... }); approach with children alone rather than parent clubbing parent and child elements

You can do this with one handler..

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

Then..

$('#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
});

Note: You can also use .on() in place of .delegate()