jQuery that executes only when a child element in the parent div is clicked

Question

I have a div element with some child controls in it (dropdowns and check boxes).

I need some jquery that will run when any of the child elements are clicked, but not when the empty space in the div is clicked.

What is the proper jQuery to accomplish this?

Answer 1

Roughly something like this

$('YourDivSelector *').click(function(){
   // your stuff here
});

Answer 2

Only attaching the click to the child elements as shown by the answer of mguimard is the best approach. In case the contents of the div are dynamic however, you could use event.target to check if the element being clicked is the same as the element that the function is attached to as follows:

$('#YourDivID').click(function(e){  
  if(e.target!==this)
     console.log('child element clicked');  
});

Answer 3

You can check if a children is clicked with target.nodeName ex :

$("#div").click(function(event) {
    console.log("clicked: " + event.target.nodeName);
});