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 中绑定(bind)点击事件，如下所示

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);

？

显然，第二个(查找)只会捕获制表符 anchor 的有意单击。 抱歉问一下。但是，我不明白这里的意思。

Answer 1

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

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

在这种情况下，它不会对下拉列表中的点击使用react。