动态创建标签后无法捕获标签点击事件 [英] Can't catch tab click event after dynamically created tabs

问题描述

我有一个基于返回的ajax数据创建一堆标签的函数，当从网格更改一行后，该函数运行，因此当我单击一行时，它会生成标签. 但是我的Tab点击事件现在没有触发，我不确定为什么

I have a function that creates a bunch of tabs based on returned ajax data, this function runs when a row has been changed from a grid, so when I click on a row it generates the tabs. However my tab click event isn't firing now and I am not sure why

html是

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

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

and the function that generates the tabs on the row click event of a grid is

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

    }
}

并且要获取标签页点击事件是

and to get the tab click event is this

$('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函数，则可以捕获选项卡单击事件，但是现在我不能

If I run the CreateTabs function in the document.ready then I can catch the tab click events, but now I can't

推荐答案

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

What you describe is expected behavior; .on() attaches an event handler to the element(s) that match the selector - if your elements aren't part of the DOM when that script runs, they won't have said event attached to them.

尽管可以通过相同的.on()方法轻松地支持它；您只需要使用委派，即在脚本运行时将事件处理程序附加到页面的 部分的元素.然后，在您的处理程序中，传递用于后代元素的选择器，该选择器将在脚本运行后添加到您的页面中.这在jQuery文档中进行了详细说明: http://api. jquery.com/on/#direct-and-delegated-events

This is easily supported though through the same .on() method; you just need to use delegation, meaning attaching your event handler to an element that is part of your page when your script runs. Within your handler you then pass the selector for the descendant elements that will be added to your page after the script runs. This is explained in detail in the jQuery documentation here: http://api.jquery.com/on/#direct-and-delegated-events

将其应用于示例代码只需:

To apply this to your sample code would simply be:

$('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交换为该页面.

Of course you don't have to use body, but absent your source page HTML, that's the only delegate I could assuredly use. Assuming #List is part of your page when your script runs, you could also swap body for that.

这篇关于动态创建标签后无法捕获标签点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！