How to prevent trigger container's event when trigger children's events in JQuery?

Question

E.g:

My HTML code structure is:

<ul>
  <li class="container_event_click">
    <div class="child_event_click">click fired but doesn't want to trigger container's event</div>
  </li>
</ul>

I mean: the container LI has its own click event.Just like selected or not.And the child div has its own click event like show something info of container.But my problem is when I click the child's event it also trigger the container's event.So,how can I resolve this problem.

Thank you very much!!

Answer 1

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

    $("div").delegate("", "click", function(e){
       e.stopPropagation();
       alert('test');
    });

Here's a working link:

http://jsfiddle.net/MN5KK/1/

Answer 2

$('.child_event_click').click(function(e) {
    e.stopPropagation();
    ...
});