Inside that I have other child divs. Those have child divs too.

<div class="parent">
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
</div>

I want to add a click event that fires when I click any element inside parent div, including parent div, excluding child_1 div and its descendants.

Currently I tried with

jQuery(".parent").not(".child_1").click(function(event) {

});

But the click event works when I click on child_1 div and it's descendants.

What is the problem here? please help.

UPDATE

here i have another click event for child_1

jQuery(".child_1").click(function(event) {

});

Inside that I have other child divs. Those have child divs too.

<div class="parent">
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
</div>

I want to add a click event that fires when I click any element inside parent div, including parent div, excluding child_1 div and its descendants.

Currently I tried with

jQuery(".parent").not(".child_1").click(function(event) {

});

But the click event works when I click on child_1 div and it's descendants.

What is the problem here? please help.

UPDATE

here i have another click event for child_1

jQuery(".child_1").click(function(event) {

});

• javascript
• jquery
• ajax

• can u send ur example in JSfiddle... – PraJen Commented May 6, 2013 at 7:23

5 Answers 5

You should do it like this.

$('.parent').on('click', function () {
  // do your stuff here
}).find('.child_1').on('click', function (e) {
  e.stopPropagation();
});

Here is a fiddle http://jsfiddle/BbX7D/1/

You still have to catch the click event on the elements that you want to exclude, otherwise the click will just bubble up to the .parent element.

Use the closest method to check if the clicked element is, or is a child of, an element with the class .child_1. Use stopPropagation to keep the event from bubbling:

$('.parent,.parent *').click(function(e){
  if ($(this).closest('.child_1').length > 0) {
    alert('in child_1');
  } else {
    alert('not in child_1');
  }
  e.stopPropagation();
});

Demo: http://jsfiddle/Guffa/tETCQ/

I think it should be

jQuery(".parent, .parent *").not(".child_1").click(function(event) {

});

Try this (fiddle):

(edit + updated fiddle) I spotted a flaw. This version checks if the clicked element is or is inside an element which has the class 'exclude':

<div class="parent">
<div class="child_1 exclude">//children elements</div>
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
<div class="child_1">//children elements</div>
</div>

jQuery(".parent").click(function(event) 
    {
    if ($(event.target).closest('.exclude').length>0) return false; 
    alert('hi');
    });

a bit of an old question, but figured i'd throw out my resolution in case it helps anyone else.

this is pretty much what i did. this example uses your markup:

$('.parent').on('click', function(e) {
    var $target = $(e.target);
    if (!$target.parents('.child_1').length && !$target.hasClass('child_1')) {
        // do what you need on the parent's click event
        // add 'e.preventDefault()' here if you need
    }
    // no need to prevent default or stop propagation here
    // this will allow click events on child elements to work
});