Same click event to trigger on parent and child

Question

I have a navigation structure where html elements have a parent child relation.

<div id="navigationStructure">
<div class="addId">
    <ol class="sortable ui-sortable">
     <!----------Parent li for navigation ----------->
        <li data-title="Home" data-link="" data-target="_self" class="item_0">
            <div class="active">
               Home
            </div>
            <ol>
            <!----- CHILD li 1----------->
                <li data-title="About" data-link="" data-target="_self" style="display: list-item;" class="item_1">
                    <div class="">
                        About
                    </div>
                </li>
                <!--------- CHILD li 2------------>
                <li data-title="Products" data-link="" data-target="_self" style="display: list-item;" class="item_2">
                    <div class="">
                        Products
                    </div>
                </li>
            </ol>
        </li>
        <li data-title="Category" data-link="" data-target="_self" class="item_3">
            <div>
               Category
            </div>
            <ol>
                <li data-title="Contact" data-link="" data-target="_self" style="display: list-item;" class="item_4">
                    <div>
                      Contact
                    </div>
                </li>
            </ol>
        </li>
    </ol>
</div>

I am trying to write a function to trigger on the click of either the parent or child and select it.

$('#popUpComponentSetting').on("click","#navigationStructure li", function() {
    $('#navigationStructure ol li div').removeClass('active');
    $('> div',this).addClass('active');
    navId = $(this).attr('class');
    .....
})

Now if I click on the child it triggers two times,one for parent and other for child.

I went through the threads over here but I want something different. I need to have a same event that works for both parent and child

score 2 · Accepted Answer · answered Aug 13 '14 at 06:52

2

Stop bubbling the event through the DOM tree by using event.stopPropgation(),

$('#popUpComponentSetting').on("click","#navigationStructure li", function(e) {
      e.stopPropagation();
      //rest of your code

answered Aug 13 '14 at 06:52

Rajaprabhu Aravindasamy

66,513
17
101
130

2

@VikasSatpute If you feel this answer has satisfied your need, then try to click on the tick mark available with this answer in order to show your acceptance to the future visitors.. And it is not a compulsion... :) – Rajaprabhu Aravindasamy Aug 13 '14 at 07:05
couldn't do it for 15mins due to stacks restrictions on time!! :P – Vikas Satpute Aug 13 '14 at 07:14

Same click event to trigger on parent and child

1 Answers1