How to select a child
without having to go through the parent in jquery

Question

I'm using jQuery to select the children li and perform some actions, and it works fine, the code should perform different actions if the parent li is selected, the only problem is that that when I select the children it perform the parents actions first and then performs the children actions and it is messing the result of my code. Here are portions of the code I'm using.

The HTML

<div class="col-md-3 categoryList">
    <h4>Materials</h4>
        <ul id="materialsMain" class="list-group navList">
            <li class="input-group htmlAlign" value="1" name="material">Concrete
                <ul class="subMaterialsMain" style="display: none;">
                    <li value="12">Lightweight</li>
                    <li value="13">Translucent</li>
                    <li value="14">Foam Aggregate</li>
                    <li value="15">Insulate</li>
                    <li value="16">Digital</li>
                    <li value="17">Geometrical</li>
                </ul>
            </li>
        </ul>
</div>

The jQuery

$('#materialsMain li').on('click', function () {
    mClicks++;
    $(this).children().css("display","block");
    if(mClicks == 3){
        var subIdClicked = ($(this).val());
        makeSearch('mat',subIdClicked,'parent');
        matCompanies = intersect_safe(globalMat, matCompanies);
        filterColumn('#processesMain li > ul');
        filterColumn('#servicesMain li > ul');
        filterColumn('#materialsMain li > ul');
        }
    });

$('#materialsMain li > ul > li').has('li').on('click', function () {
    var subIdClicked = ($(this).val());
    matCompanies = subIdClicked;
    makeSearch('mat',subIdClicked,'child');
    matCompanies = intersect_safe(globalMat, matCompanies);
    filterColumn('#processesMain li > ul');
    filterColumn('#servicesMain li > ul');
    filterColumn('#materialsMain li > ul');
});

In the last part of the jquery code I also tried using

$('.subMaterialsMain').has('li').on('click', function () {

instead of

$('#materialsMain li > ul > li').has('li').on('click', function () {

but the results were the same. How can i solve the problem? Thanks in advance

possible duplicate of [jquery stop child triggering parent event](http://stackoverflow.com/questions/2364629/jquery-stop-child-triggering-parent-event) — Bojan Petkovski, Nov 02 '14 at 18:22

score 2 · Accepted Answer · answered Nov 02 '14 at 18:20

2

stopPropagation() is what you are looking for.

$('ul.subMaterialsMain li').on('click', function (event) {
    event.stopPropagation();
    //your script to be executed on clicking child li
}

answered Nov 02 '14 at 18:20

Balaji Viswanath

1,684
1
12
19

score 0 · Answer 2 · answered Nov 02 '14 at 23:35

You want li which is the parent of ul to have a different effect with li which is the children of ul? If it is what you want, then:

$("li.input-group\\.htmlAlign").on('click', function(){
     \\do one thing;

});

$("ul.subMaterialsMain li").on('click', function(){
    \\do another thing;

})

How to select a child without having to go through the parent in jquery

2 Answers2

How to select a child
without having to go through the parent in jquery