CODEWITHSUNDEEP
jqueryjquery-selectors
dwelle
dwelle

Reputation: 7284

Select only parent, exclude everything else while click()

I have a #container and buttons which are children to this container. When I click the container itself (the white space around the buttons), I want it to change its background color but I want nothing to happen when I click the buttons.

Selecting the #container in jquery, though, makes clicking the buttons change the bg as well...

<div id="container">
   <div class="button>
      <span class="text">Button 1</span>
   </div>
   <div class="button>
      <span class="text">Button 2</span>
   </div>
</div>

$("#container").click(function() {
   $('#container').css({background: 'blue'});
});

I've tried many things, nothing seems to be working.

Upvotes: 3

Views: 3400

Answers (3)

Dennis
Dennis

Reputation: 32598

Check the id when clicking, so you don't pick up the buttons.

$("#container").click(function(event) {
   if(event.target.id === "container") {
       $('#container').css({background: 'blue'});
   }
});

Upvotes: 0

Niko
Niko

Reputation: 26730

There is a simpler another solution:

$('#container button').click(function(event) {
    event.stopPropagation();
});

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816422

Examine the original target of the event:

$("#container").click(function(event) {
   if(event.target === this) {
       $('#container').css({background: 'blue'});
   }
});

Reference: event.target

Upvotes: 11

Related Questions