Question

我正在使用javascript在jquery中动态添加新标签。我使用以下代码：

$("#mytabs1").tabs("add","list.action","New Tab");

我的问题是如何将关闭按钮（x按钮）添加到动态添加的标签中？

Answer 1

实际上有一个例子可以在jQuery ui tabs demo pages上实现这一点。

使用tabTemplate属性：

HTML模板，从中创建并添加新选项卡。该占位符＃{href}和＃{label}将替换为url和tab 作为参数传递给add方法的标签

以下是该网站的代码：

var $tabs = $( "#tabs").tabs({
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
    add: function( event, ui ) {
        var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
        $( ui.panel ).append( "<p>" + tab_content + "</p>" );
    }
});

// close icon: removing the tab on click
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
$( "#tabs span.ui-icon-close" ).live( "click", function() {
    var index = $( "li", $tabs ).index( $( this ).parent() );
    $tabs.tabs( "remove", index );
});

在您的实施中，您不应使用.live()，而应使用委托（）或 on（）。类似的东西：

$('#tabs').on('click', 'span.ui-icon-close', function() {
    var index = $( "li", $tabs ).index( $( this ).parent() );
    $tabs.tabs( "remove", index );
});

Answer 2

标签本身没有x按钮。如果你在其他地方的标签上添加一个x按钮，并希望将这个相同的x按钮添加到你添加的新标签中，你可以尝试使用tabsadd事件：

$("#mytabs1").tabs({
   add: function(event, ui) { 
      //your code that adds the custom x button to the new tab here
   }
});

Answer 3

如果您想立即选择新添加的标签：

var $tabs = $('#tabsid').tabs({
            add: function(event, ui) {
                $tabs.tabs('select', '#' + ui.panel.id);
            }
        });

这不起作用..

JQuery动态添加了javascripts标签关闭按钮

3 个答案: