Javascript 所有李'；在单击一个li-jquery之后单击

我将

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>

更改选择



2





4

5








2

3

6

在冒泡出DOM树时会发生这种情况。您应该像下面这样使用

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

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

---

在DOM树上冒泡时会发生这种情况。您应该像下面这样使用

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

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

您可以使用：

：为了防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知

我的片段：

$（“li.change\u select”）。单击（函数（e）{
e、 停止传播（）；
var category_id=$（this.attr（'id'）；
控制台日志（类别_id）；
});


更改选择



2





4

5








2

3

6







您可以使用：

：为了防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知

我的片段：


$（“li.change\u select”）。单击（函数（e）{
e、 停止传播（）；
var category_id=$（this.attr（'id'）；
控制台日志（类别_id）；
});


更改选择



2





4

5