Question

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.

Answer 1

Examine the original target of the event:

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

Reference: event.target