Question

我有一个基于返回的ajax数据创建一组标签的函数，当从网格中更改行时，此函数会运行，因此当我单击一行时，它会生成标签。但是我的标签点击事件现在没有解雇，我不知道为什么

html是

<div id="AreaTabs">
<!-- New CM -->
<div id="DynamicTabsWrapper">
    <ul id="List" class="nav nav-tabs"></ul>
</div>

并且在网格的行单击事件上生成选项卡的函数是

function CreateTabs() {
    for (i = 0; i < junkData.length; i++) {

        $('#List').append("<li id='" + junkData[i].AreaID + "' class='nav-item not-active'><a class='nav-link' href='" + junkData[i].AreaName + "' data-toggle='tab' data-e='abc'>" + junkData[i].AreaName + "</a></li>");

        $("#List li").first().addClass("active").removeClass("not-active");

    }
}

并获取标签点击事件是这个

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('#List.nav-link li.active').removeClass("active");
    GetTarget(e);
    $(this).addClass('active');
    $(this).removeClass("not-active");
});

如果我在document.ready中运行CreateTabs函数，那么我可以捕获标签点击事件，但现在我无法

Answer 1

您描述的是预期的行为; .on()将事件处理程序附加到与选择器匹配的元素 - 如果在运行该脚本时元素不是DOM的一部分，则它们不会附加所述事件。

虽然通过相同的.on()方法可以轻松支持此功能。您只需要使用委托，这意味着在脚本运行时将事件处理程序附加到部分页面的元素。在处理程序中，然后传递选择器以查找将在脚本运行后添加到页面的后代元素。这里的jQuery文档详细解释了这一点：http://api.jquery.com/on/#direct-and-delegated-events

要将此应用于您的示例代码，只需：

$('body').on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    $('#List.nav-link li.active').removeClass("active");
    GetTarget(e);
    $(this).addClass('active');
    $(this).removeClass("not-active");
});

当然，您不必使用body，但缺少源页面HTML，这是我可以肯定使用的唯一代表。假设脚本运行时#List是您网页的一部分，您也可以将body换成。{/ p>

动态创建标签后无法捕捉标签点击事件

1 个答案: