jQuery 嵌套点击处理程序

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中绑定click-event如下

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>li>a 在更改下拉列表的值时调用handleClickEvent 函数（这显然不是故意的）。 我怎样才能避免这种行为？

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

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

和

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

?

显然，第二个（查找）只会捕捉到选项卡锚点的有意点击。 不好意思问。但是，我不明白这里的意思。

Answer 1

您可以将点击事件限制为仅与选项卡相关的事件：

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

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