标签不断添加

Question

我正在使用 jquery UI 选项卡，当我在成功回调中调用它们时，如果来自服务器的 JSON 数据，它会创建两个额外的选项卡，它第一次运行良好并且它发生在模式内部，模式也被关闭并重新打开，但是模型没有被破坏，结构的构建方式使得模态的破坏可能无法在此处正常工作

所以下面的代码添加了选项卡，但是当我关闭模式并再次重新打开它时，它又添加了两个具有相同名称和详细信息的选项卡，因此它继续附加

success: function(response) {
      var tabTitle1 = response.title1; // replace with how you access your title in data
      var tabContent1 = response.msg1 + "\n" + response.label1 + "\n" + response.textData1 + "\n" + response.content1; // replace with how you access your content in data
      var tabTitle2 = response.title2;// replace with how you access your title in data
      var tabContent2 = response.msg2 + "\n" + response.label2 + "\n" + response.textData2 + "\n" + response.content2; // replace with how you access your content in data

      var tabTemplate = "<li><a href='#{href}'>#{label}</a></li>";
      var id1 = "tabs-" + ( $("#tabs li").length + 1 );
      var id2 = "tabs-" + ( $("#tabs li").length + 2 );

      var li1 = $( tabTemplate.replace( /#\{href\}/g, "#" + id1 ).replace( /#\{label\}/g, tabTitle1 ) );
      var li2 = $( tabTemplate.replace( /#\{href\}/g, "#" + id2 ).replace( /#\{label\}/g, tabTitle2 ) );

      $("#tabs").find( ".ui-tabs-nav" ).append( li1 );
      $("#tabs").append( "<div id='" + id1 + "'>" + tabContent1 + "</div>" );

      $("#tabs").find( ".ui-tabs-nav" ).append( li2 );
      $("#tabs").append( "<div id='" + id2 + "'>" + tabContent2 + "</div>" );

      $("#tabs").tabs( "refresh" );
    },

出事了，无法弄清楚我的时间发生了什么事

Answer 1

以下是您可以修改代码以在添加新选项卡之前清除现有选项卡的方法：

success: function(response) {
    var tabTitle1 = response.title1;
    var tabContent1 = response.msg1 + "\n" + response.label1 + "\n" + response.textData1 + "\n" + response.content1;
    var tabTitle2 = response.title2;
    var tabContent2 = response.msg2 + "\n" + response.label2 + "\n" + response.textData2 + "\n" + response.content2;

    // Clear existing tabs
    $("#tabs").tabs("destroy").find("ul, li").remove();

    var tabTemplate = "<li><a href='#{href}'>#{label}</a></li>";
    var id1 = "tabs-" + ( $("#tabs li").length + 1 );
    var id2 = "tabs-" + ( $("#tabs li").length + 2 );

    var li1 = $( tabTemplate.replace( /#\{href\}/g, "#" + id1 ).replace( /#\{label\}/g, tabTitle1 ) );
    var li2 = $( tabTemplate.replace( /#\{href\}/g, "#" + id2 ).replace( /#\{label\}/g, tabTitle2 ) );

    $("#tabs").find( ".ui-tabs-nav" ).append( li1 );
    $("#tabs").append( "<div id='" + id1 + "'>" + tabContent1 + "</div>" );

    $("#tabs").find( ".ui-tabs-nav" ).append( li2 );
    $("#tabs").append( "<div id='" + id2 + "'>" + tabContent2 + "</div>" );

    $("#tabs").tabs();
},

此修改将清除现有选项卡，然后根据响应数据添加新选项卡。请务必对此进行测试，以确保它的行为符合您的模态设置的预期。