Javascript 按类划分的JQuery ui选项卡未正确更新

由于jQueryUI选项卡使用ID而不是类标记，因此我创建了一个函数来为我的所有类生成ID。现在我想添加新内容并将其应用于新内容，但添加新内容后，所有其他选项卡都停止工作

这是html内容：

<div class="accordion">
    <h3>Product x</h3>
    <div class="tabs">
        <ul>
            <li><a href="" class="tabpanellink">General product info</a></li>
            <li><a href="" class="tabpanellink">End user info</a></li>
        </ul>
        <div class="tabpanel">
            general info for product x.
        </div>
        <div class="tabpanel">
            end user info product x.
        </div>
    </div>
</div>
<div class="accordion">
    <h3>Product y</h3>
    <div class="tabs">
        <ul>
            <li><a href="" class="tabpanellink">General info</a></li>
            <li><a href="" class="tabpanellink">End user info</a></li>
        </ul>
        <div class="tabpanel">
            general info for product y.
        </div>
        <div class="tabpanel">
            end user info product y.
        </div>
    </div>
</div>

产品x




产品x的一般信息。
最终用户信息产品x。
产品y




产品y的一般信息。
最终用户信息产品y。

这就是我想用它做的：

function fixtabs(){
    $(".tabpanellink").each(
        function(uniqueindex){
            $(this).attr('href', '#tab-' + uniqueindex);
        }
    );
    $(".tabpanel").each(
        function(uniqueindex){
            $(this).attr('id', 'tab-' + uniqueindex);
        }
    );

    $(".accordion").accordion({
        collapsible: true,
        active: false
    });
}
function updateDocument(){
    fixtabs();
    $(".tabs").tabs();
}

function addProduct(){
    //Add another product(this is a server response in a real case scenario):
    var newProduct = '';
    newProduct += '<div class="accordion">';
    newProduct +=   '<h3>Product z</h3>';
    newProduct +=   '<div class="tabs">';
    newProduct +=       '<ul>';
    newProduct +=           '<li><a href="" class="tabpanellink">General product info</a></li>';
    newProduct +=           '<li><a href="" class="tabpanellink">End user info</a></li>';
    newProduct +=       '</ul>';
    newProduct +=       '<div class="tabpanel">';
    newProduct +=           'general info for new product.';
    newProduct +=       '</div>';
    newProduct +=       '<div class="tabpanel">';
    newProduct +=           'end user info product x.';
    newProduct +=       '</div>';
    newProduct +=   '</div>';
    newProduct += '</div>';
    $(".accordion").first().before(newProduct);
    updateDocument();
}
updateDocument();
addProduct();

函数fixtab（）{
$（“.tabpanellink”）。每个(
函数（唯一索引）{
$（this.attr（'href'，'#tab-'+uniqueindex）；
}
);
$（“.tabpanel”）。每个(
函数（唯一索引）{
$（this.attr（'id'，'tab-'+唯一索引）；
}
);
$（“手风琴”）。手风琴({
可折叠的：是的，
活动：错误
});
}
函数updateDocument（）{
固定标签（）；
$（“.tabs”）.tabs（）；
}
函数addProduct（）{
//添加另一个产品（这是实际情况下的服务器响应）：
var newProduct=“”；
新产品+=''；
新产品+=‘产品z’；
新产品+=''；
新产品+=“
”；
新产品+='
'；
新产品+='
'；
新产品+='
'；
新产品+=''；
新产品+=“新产品的一般信息”；
新产品+=''；
新产品+=''；
新产品+='最终用户信息产品x'；
新产品+=''；
新产品+=''；
新产品+=''；
$（“.accordion”）.first（）.before（新产品）；
updateDocument（）；
}
updateDocument（）；
addProduct（）；

这是你的电话号码

如何在不损坏现有选项卡的情况下对新内容应用选项卡效果

---

更新对答案的响应：我无法删除

updateProduct（）！我必须先调用updateDocument，以便所有内容都已初始化！addProduct仅在之后调用（即，当用户单击add product时！）
其工作正常-

只需调用您的
addProduct（）更新文档（）之前的函数

拨弄

函数fixtab（）{
$（“.tabpanellink”）。每个(
函数（唯一索引）{
$（this.attr（'href'，'#tab-'+uniqueindex）；
uniqueindex++；
}
);
唯一索引=0；
$（“.tabpanel”）。每个(
函数（唯一索引）{
$（this.attr（'id'，'tab-'+唯一索引）；
uniqueindex++；
}
);
$（“手风琴”）。手风琴({
可折叠的：是的，
活动：错误
});
}
函数updateDocument（）{
固定标签（）；
$（“.tabs”）.tabs（）；
}
函数addProduct（）{
//添加其他产品：
var newProduct=“”；
新产品+=''；
新产品+=‘产品z’；
新产品+=''；
新产品+=“
”；
新产品+='
'；
新产品+='
'；
新产品+='
'；
新产品+=''；
新产品+=“新产品的一般信息”；
新产品+=''；
新产品+=''；
新产品+='最终用户信息产品x'；
新产品+=''；
新产品+=''；
新产品+=''；
$（“.accordion”）.first（）.before（新产品）；
updateDocument（）；
}
addProduct（）；
updateDocument（）；
现在试试这个，它可以很好地与您的添加产品选项配合使用

**

这是
**

添加另一个Div作为父Div

<div id="accor">    

<div class="accordion">
        <h3>Product x</h3>
        <div class="tabs">
            <ul>
                <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
                <li><a href="" class="tabpanellink">General product info</a></li>
                <li><a href="" class="tabpanellink">End user info</a></li>
            </ul>
            <div class="tabpanel">
                general info for product x.
            </div>
            <div class="tabpanel">
                end user info product x.
            </div>
        </div>
    </div>
    <div class="accordion">
        <h3>Product y</h3>
        <div class="tabs">
            <ul>
                <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
                <li><a href="" class="tabpanellink">General info</a></li>
                <li><a href="" class="tabpanellink">End user info</a></li>
            </ul>
            <div class="tabpanel">
                general info for product y.
            </div>
            <div class="tabpanel">
                end user info product y.
            </div>
        </div>
    </div>
</div>
<button id="AddProduct"> add product</button >


产品x




产品x的一般信息。
最终用户信息产品x。
产品y




产品y的一般信息。
最终用户信息产品y。
添加产品

在你的Jquery代码中会是这样的-

function fixtabs(){
    $(".tabpanellink").each(
        function(uniqueindex){
            $(this).attr('href', '#tab-' + uniqueindex);
            uniqueindex++;
        }
    );
    uniqueindex = 0;
    $(".tabpanel").each(
        function(uniqueindex){
            $(this).attr('id', 'tab-' + uniqueindex);
            uniqueindex++;
        }
    );

    $(".accordion").accordion({
        collapsible: true,
        active: false
    });
}
function updateDocument(){
    fixtabs();
    $(".tabs").tabs();
}

function addProduct(){
    //Add another product:
    var newProduct = '';
    newProduct += '<div class="accordion">';
    newProduct +=   '<h3>Product z</h3>';
    newProduct +=   '<div class="tabs">';
    newProduct +=       '<ul>';
    newProduct +=           '<li><a href="" class="tabpanellink">General product info</a></li>';
    newProduct +=           '<li><a href="" class="tabpanellink">End user info</a></li>';
    newProduct +=       '</ul>';
    newProduct +=       '<div class="tabpanel">';
    newProduct +=           'general info for new product.';
    newProduct +=       '</div>';
    newProduct +=       '<div class="tabpanel">';
    newProduct +=           'end user info product x.';
    newProduct +=       '</div>';
    newProduct +=   '</div>';
    newProduct += '</div>';
    $("#accor").first().append(newProduct);
    updateDocument();
   //$(".tabs").tabs();
    //fixtabs();
}
//addProduct();
updateDocument();

$('#AddProduct').click(function(){
addProduct();
//$(".tabs").tabs();
//updateDocument();
});

函数fixtab（）{
$（“.tabpanellink”）。每个(
函数（唯一索引）{
$（this.attr（'href'，'#tab-'+uniqueindex）；
uniqueindex++；
}
);
唯一索引=0；
$（“.tabpanel”）。每个(
函数（唯一索引）{
$（this.attr（'id'，'tab-'+唯一索引）；
uniqueindex++；
}
);
$（“手风琴”）。手风琴({
可折叠的：是的，
活动：错误
});
}
函数updateDocument（）{
固定标签（）；
$（“.tabs”）.tabs（）；
}
函数addProduct（）{
//添加其他产品：
var newProduct=“”；
新产品+=''；
新产品+=‘产品z’；
新产品+=''；
新产品+=“
”；
新产品+='
'；
新产品+='
'；
新产品+='
'；
新产品+=''；
新产品+=“新产品的一般信息”；
新产品+=''；
新产品+=''；
新产品+='最终用户信息产品x'；
新产品+=''；
新产品+=''；
新产品+=''；
$（“#accor”）.first（）.append（新产品）；
updateDocument（）；
//$（“.tabs”）.tabs（）；
//固定标签（）；
}
//addProduct（）；
updateDocument（）；
$（“#添加产品”）。单击（函数（）{
addProduct（）；
//$（“.tabs”）.tabs（）；
//updateDocument（）；
});
您正在使用
uniqueindex
作为
每个调用中的参数名。这不会增加您期望的每个变量旁边的
uniqueindex
变量，但只会增加参数
function fixtabs(){
    $(".tabpanellink").each(
        function(uniqueindex){
            $(this).attr('href', '#tab-' + uniqueindex);
            uniqueindex++;
        }
    );
    uniqueindex = 0;
    $(".tabpanel").each(
        function(uniqueindex){
            $(this).attr('id', 'tab-' + uniqueindex);
            uniqueindex++;
        }
    );

    $(".accordion").accordion({
        collapsible: true,
        active: false
    });
}
function updateDocument(){
    fixtabs();
    $(".tabs").tabs();
}

function addProduct(){
    //Add another product:
    var newProduct = '';
    newProduct += '<div class="accordion">';
    newProduct +=   '<h3>Product z</h3>';
    newProduct +=   '<div class="tabs">';
    newProduct +=       '<ul>';
    newProduct +=           '<li><a href="" class="tabpanellink">General product info</a></li>';
    newProduct +=           '<li><a href="" class="tabpanellink">End user info</a></li>';
    newProduct +=       '</ul>';
    newProduct +=       '<div class="tabpanel">';
    newProduct +=           'general info for new product.';
    newProduct +=       '</div>';
    newProduct +=       '<div class="tabpanel">';
    newProduct +=           'end user info product x.';
    newProduct +=       '</div>';
    newProduct +=   '</div>';
    newProduct += '</div>';
    $("#accor").first().append(newProduct);
    updateDocument();
   //$(".tabs").tabs();
    //fixtabs();
}
//addProduct();
updateDocument();

$('#AddProduct').click(function(){
addProduct();
//$(".tabs").tabs();
//updateDocument();
});