help with event click

I'm developing a html with this structure

div id="menuContainer">
    <div class = "menu ui-accordion-header ui-state-default ui-corner-all">
        <label class="formatText">Cliente</label><span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float: right"></span>
            <div class = "subMenu ui-accordion-header ui-state-default ui-corner-all">
                <ul class="options">
                    <li>
                        <label class="formatText">Ver Cliente</label><span class="ui-icon ui-icon-triangle-1-e" style="float: right"></span>
                            <div class = "subMenuRight ui-accordion-header ui-state-default ui-corner-all">
                                <ul class="options">
                                    <li>
                                        <label class="formatText">Por Nombre</label><span class="ui-icon ui-icon-triangle-1-e" style="float: right"></span>
                                            <div class = "subMenuRight ui-accordion-header ui-state-default ui-corner-all">
                                                <ul class="options">
                                                    <li><label class="formatText">sub sub menu</label></li>
                                                    <li><label class="formatText">prueba</label></li>
                                                </ul>
                                            </div>
                                    </li>
                                    <li>
                                        <label class="formatText">Por Campana</label>
                                    </li>
                                </ul>
                            </div>
                    </li>
                    <li>
                        <label class="formatText">Reportes para Cliente</label>
                    </li>
                </ul>
            </div>
    </div>
&开发者_JAVA技巧lt;/div>

notice that the principal div have class called menu, in the inside there are a some divs that with a classes called subMenu and subMenuRight, my problem it's that i want associate a event click to the father and other behavior to the divs children i tried like this

$(".menu").click(function () {
    alert('click in the father');
});
$(".subMenu li").click(function () {
    alert('click in the first child');
});
$(".subMenuRight li").click(function () {
    alert('click in the second child');
});

The problem with this code it's that div father contains the divs children all the event handler are triggered. So my question is How can I modify the selector or validate the in the event handler for to only fire the exactly element that is clicked??

---

use event.stopPropagation() for all the click handlers e.g.

$(".menu").click(function (e) {
    e.stopPropagation()
    alert('click in the father');
});

here is the fiddle http://jsfiddle.net/yFFGS/

---

You should definitely look here for an outline of different options.

false basically calls preventDefault and stopPropagation which will be treated on below.

preventDefault stops the default behavior of the event -- in this case, it could stop an anchor from firing. You won't be terribly concerned with this behavior in your current example as you aren't actually

event.stopPropagation Prevents parent nodes from "hearing" the event. It will, however, allow anchor tags to continue working. Unless you want a parent of .menu to listen to the event, this will do what you are looking for. It is technically the most correct in this case.

event.stopImmediatePropagation calls stopPropagation and then makes sure that all listeners which have been added after the listener which calls that event will not fire.

---

If you want to stop event bubling just return false from the handler.

$(".menu").click(function () {
    alert('click in the father');
    return false;
});
$(".subMenu li").click(function () {
    alert('click in the first child');
    return false;
});
$(".subMenuRight li").click(function () {
    alert('click in the second child');
    return false;
});

---

$('#menuContainer')
    .delegate('.menu', 'click', function() {
        alert(1);
        return false;
    })
    .delegate('.subMenu li', 'click', function() {
        alert(2);
        return false;
    })
    .delegate('.subMenuRight li', 'click', function() {
        alert(3);
        return false; // this stops triggering events on parent els
    })

---

As can be seen from the html code, there are two li's each for subMenu and subMenuRight. Maybe you should use the :first selector in each case:

$(".subMenu li:first").click(function () {
    alert('click in the first child');
});
$(".subMenuRight li:first").click(function () {
    alert('click in the second child');
});

---

if you use .bind() instead you can set the preventBubble variable to false to prevent clicks bubbling up to parent elements (http://api.jquery.com/bind/)

$(".menu").bind('click', function () {
    alert('click in the father');
}, false);
$(".subMenu li").bind('click', function () {
    alert('click in the first child');
}, false);
$(".subMenuRight li").bind('click', function () {
    alert('click in the second child');
}, false);