如何在单击按钮时添加动态选项卡，但只能单击一次

how to add dynamic tabs on button click but only once

本文关键字：单击 一次 按钮 添加 选项 动态      更新时间：2023-09-26

昨天我尝试使用follow

$(document).ready(function() {
        var tabs = $("#container-1").tabs();
            var tabCounter = 1;
        $('#add_tab').click( function(){
            var ul = tabs.find( "ul" );
            $( "<li><a href='#fragment-4'>Call Detials</a></li>" ).appendTo( ul );
            tabs.tabs( "refresh" );
            tabs.tabs('select', 1);
            tabs.append( $('#fragment-4'));
        });
  });

但使用上面的代码，当onclick事件fire生成一个新的选项卡时，我不想要多个相同的选项卡，所以如果已经添加了相同的选项卡的话，我希望避免添加。如果已经添加了相同的选项卡，请向我建议避免该选项卡的任何条件？

您可以保持一切不变，但更改为.one事件处理程序，该处理程序在一次调用后解除事件绑定

$(document).ready(function() {
    var tabs = $("#container-1").tabs();
        var tabCounter = 1;
    $('#add_tab').one('click', function(){
        var ul = tabs.find( "ul" );
        $( "<li><a href='#fragment-4'>Call Detials</a></li>" ).appendTo( ul );
        tabs.tabs( "refresh" );
        tabs.tabs('select', 1);
        tabs.append( $('#fragment-4'));
    });
});

试试这个，

$('#add_tab').click( function(){
    var ul = tabs.find( "ul" );
    var flag=true;
    $(ul).find('li').each(function(){
        if($(this).text()=='Call Detials')
        {
            // to prevent from creating a new tab under ul
            flag=false;
        }
    });
    if(flag)//if true then create the tab Call Details
    {
        $( "<li><a href='#fragment-4'>Call Detials</a></li>" ).appendTo( ul );
        tabs.tabs( "refresh" );
        tabs.tabs('select', 1);
        tabs.append( $('#fragment-4'));
    }
});
相关文章：