CODEWITHSUNDEEP
javascriptjqueryhtmlparent-child
Vikas Satpute
Vikas Satpute

Reputation: 9

Same click event to trigger on parent and child

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

Upvotes: 1

Views: 646

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

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

Upvotes: 2

Related Questions