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 附加的所有处理程序。