附加到按钮单击jquery上的垂直手风琴

Question

我有一个水平选项卡，在其中，我有一个垂直选项卡功能。在垂直选项卡中，我提供了一个名为 Add More 的按钮，如下所示：

<button id="addMore" type="button">Add More</button>

点击按钮后，我想将新标签附加到前一个标签。

按钮上的点击方法：

$('#addMore').on('click', function() {
    $('#vtabs ul li').last().append('<li><a href="#option1">Option 1</a></li>');
    $('#vtabs div').last().append('<div id="option1">dsg</div>');

    $("#vtabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $("#vtabs > ul > li").removeClass("ui-corner-top").addClass("ui-corner-left");
});

HTML部分：

<div id = "htabs-outer">
    <h1>htabs-outer</h2>
    <ul>
        <li><a href="#htab-outer-2">Horizontal Tab 2</a></li>
    </ul>

    <div id = "htab-outer-2">
        <h2>Htab outer 2 content</h2>
        <div id="vtabs">
            <h1>Vtabs</h1>
            <ul>
                <li><a href="#vtab-1">Vertical Tab 1</a></li>
                <li><a href="#vtab-2">Vertical Tab 2</a></li>
                <li><a href="#vtab-3">Vertical Tab 3</a></li>
            </ul>
            <div id="vtab-1">
                <h2>Vtab 1 content</h2>
            </div>
            <div id="vtab-2">
                <h2>Vtab 2 content</h2>
            </div>
            <div id="vtab-3">
                <h2>Vtab 3 content</h2>
            </div>
        </div>
        <button id="addMore" type="button">Add More</button>
    </div>
</div>

这确实会附加到最后一个 li 元素，但不能正常运行。

我希望如果单击按钮，它应该附加到垂直选项卡，还应该附加其对应的div。

我犯了什么错误？

这是fiddle，你可以看看

Answer 1

首先，您需要使用after() 来添加新选项卡，因为append() 将其放置在现有选项卡结构中，这是不正确的。其次，您还需要在选项卡上调用refresh 以添加所需的样式和事件。试试这个：

$(function () {
    $("#htabs-outer").tabs();

    var $vtabs = $('#vtabs').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $vtabs.find('> ul > li').removeClass("ui-corner-top").addClass("ui-corner-left");

    $('#addMore').on('click', function () {
        $vtabs
            .find('ul li:last').after('<li><a href="#option1">Option 1</a></li>').end()
            .find('div:last').after('<div id="option1">dsg</div>').end()
            .tabs('refresh').addClass("ui-tabs-vertical ui-helper-clearfix").end()
            .find("> ul > li").removeClass("ui-corner-top").addClass("ui-corner-left");
    });
});

Updated fiddle

另请注意，您的 click 处理程序应位于 $(function() {}) 处理程序内。