时间戳

首页 > 解决方案 > 动态创建选项卡后无法捕获选项卡单击事件

jquery - 动态创建选项卡后无法捕获选项卡单击事件

问题描述

我有一个函数可以根据返回的 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 函数，那么我可以捕获选项卡单击事件，但现在我不能

标签： jquery

解决方案

您描述的是预期行为；.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它。

推荐阅读