按类别的jQuery UI标签未正确更新

Question

由于jquery-ui选项卡使用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>

这就是我要使用的方法：

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();

这是jsfiddle 。

如何在不破坏现有标签的情况下在新内容上应用标签效果？

更新以回答问题：我无法删除updateProduct(); ！ 我必须先调用updateDocument，以便一切都初始化了！ 仅在之后才调用addProduct（即，当用户单击添加产品时！）

Answer 1

现在尝试使用添加产品选项使其正常工作

**

这是小提琴

**

将另一个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 >

而在您的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();
});

Answer 2

现在工作正常-

只需调用您的addProduct(); 在updateDocument();之前的函数updateDocument();

在这里摆弄

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>';
    $(".accordion").first().before(newProduct);
    updateDocument();
}
addProduct();
updateDocument();