Question

我有以下标记代表bootstrap标签元素：

<div id="someDivID">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="theTabContent">
        </div>
    </div>
</div>

我在javascript / jQuery

中按如下方式绑定点击事件

var $theDiv = $("#someDivId");
$theDiv.on("click", "ul li a", handleClickEvent);

由于标签的内容会在以后动态呈现/添加，因此我可以使用#theTabContent div中的bootstrap下拉列表:(取自文档）

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown</button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li>
            <a href="#">Action</a>
        </li>
        <li>
            <a href="#">Another action</a>
        </li>
        <li>
            <a href="#">Something else here</a>
        </li>
        <li>
            <a href="#">Separated link</a>
        </li>
    </ul>
</div>

由于嵌套的ul＆gt; li＆gt; a，在更改下拉列表的值时会调用handleClickEvent函数（显然不是这样）。我怎样才能绕过这种行为？

之间的区别是什么（如果有的话）

$theDiv.on("click", "ul li a", handleClickEvent);

和

$theDiv.find("ul li a").on("click", handleClickEvent);

显然，第二个（查找）只会捕获tab-anchor的有意点击。很抱歉问。但是，我不明白这一点。

Answer 1

您可以将点击事件限制为仅与标签相关的事件：

var $theDiv = $("#someDivId");
$theDiv.on("click", ".nav-tabs", handleClickEvent);

在这种情况下，它不会对下拉列表中的点击做出反应。

jQuery嵌套点击手

1 个答案: