点击一个li - jquery后点击所有li

Question

我有li和ul作为层次树。

但是当我点击li时，点击了所有li。

例如，当我点击id="11"时，我的控制台日志告诉我这条消息：

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 1

这是为了冒泡DOM树而发生的。您应该使用stopPropagation()之类的内容。

$("li.change_select").click(function(e){
    e.stopPropagation();

    var category_id = $(this).attr('id');
    console.log(category_id);
});

Answer 2

您可以使用：

  

e.stopPropagation()：为了防止事件冒泡DOM树，阻止任何父处理程序被通知事件。

我的片段：

$("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>