add Listener on container DIV and sub DIV with jQuery

Question

<div id="container">
    <div id="son1">
    </div>
    <div id="son2">
    </div>
</div>

When click inside "container" or "son1",I need to call "func1",

and when click inside "son2",I need to call "func2",and shouldn't call "func1" again.

How to do it with jQuery?

$('container').click(..) will be called even when clicking on "son2"

Answer 1

$("#son1,,#container").click(function(event){
    // do your action 
});


$("#son2").click(function(event){
    // do your action 
});

and use

event.stopPropagation()

in the click event of these divs if you don't want to propagate these events.

Answer 2

You will need to move son2 out of container if you want to click son2 without calling click event on container.

<div id="container">
    <div id="son1">
    </div>
</div>

<div id="son2">
</div>

<script type="text/javascript">
   /* <![CDATA[ */
   $('#son1,#container').click(func1);
   $('#son2').click(func2);
   /* ]]> */
</script>