创建后无法选择jquery中的动态选项卡

Question

我正在通过“标签添加”按钮创建动态标签。

“tab-add”按钮被附加到选项卡的末尾，然后初始化选项卡，例如

$('#tabs').sortable({
    create: function( event, ui ) {
        $tabs = $( '#tabtab' ).tabs({
            create: function(event, ui) {
                $('#tabs').append( '<li id="tab-add" class="noSort"></li>' );
            },
            add: function( event, ui ) { ...

单击“tab-add”按钮（实际上是li）时，将使用.tabs（'add'，href，input）表示法创建一个新选项卡。然后我将输入字段注入到生成的选项卡li中。这将删除新创建的li中的默认生成链接。

<li id="tab-1">
    <input type="text" id="tab-input"></input>
</li>

当输入失去焦点时，这可以正常工作，将输入中收集的信息发布到数据库，并将正确的li语法返回到id“tab-1”。

<li id="tab-1">
    <a href="#tabs-1">The Name of My New Tab</a>
</li>

现在，这就是我被困住的地方。

选择了正确的选项卡（如上所示）并显示面板，但是当我单击另一个已创建的选项卡然后单击我刚刚生成的选项卡时，选项卡将不会选择（见下文）。当我尝试单击“我的新标签的名称”选项卡时，它不会选择（突出显示）。

这与“tab-1”的内容是动态生成且标签没有自行重新生成的事实有关。因为，如果我继续添加另一个新选项卡，选项卡开始正常工作。我不想进行页面刷新我只希望该选项卡在生成后立即工作。我已经尝试选择，加载和启用选项卡而没有任何效果。

在这种动态方法之后，是否有一种灵活的方式来重新生成标签？

我希望这读不是太沉闷！任何帮助将不胜感激。

Answer 1

好的，我现在明白了。问题是，当您添加新选项卡时，jquery.ui代码会将一堆处理程序附加到您正在替换的标记。而不是替换此标记，只需隐藏它。然后当输入失去焦点时，更改由jquery.ui创建的文本内部并再次显示它。这样你就可以通过jquery.ui保持所有处理程序的连接。