S.M_Emamian S.M_Emamian - 2 months ago 6
Javascript Question

all li's are clicked after click on one li - jquery

I have

li
's and
ul
's as a hierarchy tree .

but when I click on a
li
, all
li
's clicked .

for example when I click on
id="11"
, my console log got me this message:

11
10
9
1


jQuery:

$("li.change_select").click(function() {
var category_id = $(this).attr('id');
console.log(category_id);
});


HTML:

<div class="row">

<ul style="cursor:pointer" class="change_select">
<li id="1" class="change_select">بدون دسته بندی
<ul style="cursor:pointer" class="change_select">
<li id="2" class="change_select">تست
<ul style="cursor:pointer" class="change_select">
<li id="3" class="change_select">تست 2</li>
<li id="4" class="change_select">عنوان</li>
<li id="5" class="change_select">تست
<ul style="cursor:pointer" class="change_select">
<li id="6" class="change_select">تست
<ul style="cursor:pointer" class="change_select">
<li id="7" class="change_select">تست 4
<ul style="cursor:pointer" class="change_select">
<li id="8" class="change_select">تست 5</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="9" class="change_select">شماره 2
<ul style="cursor:pointer" class="change_select">
<li id="10" class="change_select">شماره 3
<ul style="cursor:pointer" class="change_select">
<li id="11" class="change_select">شماره 6</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

</div>

Answer

You may use:

e.stopPropagation(): in order to prevent the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

My snippet:

$("li.change_select").click(function(e){
  e.stopPropagation();
  var category_id = $(this).attr('id');

  console.log(category_id);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>
    <ul style="cursor:pointer" class="change_select">
        <li id="1" class="change_select">بدون دسته بندی
            <ul style="cursor:pointer" class="change_select">
                <li id="2" class="change_select">تست
                    <ul style="cursor:pointer" class="change_select">
                        <li id="3" class="change_select">تست 2</li>
                        <li id="4" class="change_select">عنوان</li>
                        <li id="5" class="change_select">تست
                            <ul style="cursor:pointer" class="change_select">
                                <li id="6" class="change_select">تست
                                    <ul style="cursor:pointer" class="change_select">
                                        <li id="7" class="change_select">تست 4
                                            <ul style="cursor:pointer" class="change_select">
                                                <li id="8" class="change_select">تست 5</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li id="9" class="change_select">شماره 2
                    <ul style="cursor:pointer" class="change_select">
                        <li id="10" class="change_select">شماره 3
                            <ul style="cursor:pointer" class="change_select">
                                <li id="11" class="change_select">شماره 6</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</div>

Comments