Question

所以我有这些响应标签。

<ul class="tabs">
    <li><a href="#">Tab01</a></li>
    <li><a href="#">Tab02</a></li>
    <li><a href="#">Tab03</a></li>
    <li><a href="#">Tab04</a></li>
</ul> 
<div class="tab_content">

    <div class="tabs_item">
        <h4>Tab 01</h4>
        <p>Tab 01</p>
    </div>
 etc. etc.

这些都有效。如果你要添加第5个列表项和第5个div，那么一切都会完美无缺，当你点击它时，你会有一个新的标签项，其中包含该项的标签内容。

以下是所有这些的代码：

$(document).ready(function() { 

(function ($) { 
    $('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');

    $('.tab ul.tabs li a').click(function (g) { 
        var tab = $(this).closest('.tab'), 
            index = $(this).closest('li').index();

        tab.find('ul.tabs > li').removeClass('current');
        $(this).closest('li').addClass('current');

        tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
        tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();

        g.preventDefault();
    } );
})(jQuery);

});

现在我还有第二个js文件。这个是在我的选项卡中添加其他列表项。基本上，您单击一个按钮，然后

$(tabs).append('<li><a href="#">Tab05</a></li>');

发生。现在这个工作，有点。您将获得一个名为Tab05的新列表项。您检查HTML，它与其他列表项完全相同。但是，单击它时它什么都不做。它不会作为响应选项卡激活。为什么会这样？

Answer 1

jQuery选择器在执行代码时选择存在于DOM中的匹配元素。它们必须存在于您的代码进行事件绑定调用时的页面上。

当您动态添加标签

时

$(tabs).append('<li><a href="#">Tab05</a></li>');

您需要使用Event Delegation。您必须使用委托事件方法.on()。

即

$(document).on('event','selector',callback_function)

实施例

$(document).on('click', '.tab ul.tabs li a', function(){
    //Your code
});

代替document，您应该使用最近的静态容器。

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

添加其他响应标签按钮

1 个答案: