添加额外的响应选项卡按钮

add additional responsive tabs button

本文关键字：选项 按钮 响应 添加      更新时间：2023-09-26

我有这些响应式标签。

<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，它与其他列表项完全相同。然而，当你点击它时，它什么也不做。它不是作为响应式标签激活的。为什么会发生这种情况?

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

动态添加制表符

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

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

。

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

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

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

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

相关文章：