JQueryが動的にjavascriptsタグを閉じるボタンを追加しました

Question

私はjqueryに新しいタブを動的に追加するためにjavascriptを使用しています。私は次のコードを使用します：

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

私はそれらの動的に追加されたタブに閉じるボタン（xボタン）を追加できますか？

Answer 1

実際にjQuery ui tabs demo pagesでこれを実現する例があります。新しいタブが作成され、追加された

HTMLテンプレート：

はtabTemplateプロパティを使用します。

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

： プレースホルダの＃{HREF}と＃{ラベル}はaddメソッドここ

に引数として渡されたURLとタブ ラベルに置き換えているサイトからのコードです実装では、.live()ではなく、delegate（）または（）を使用してください。次のようなものがあります。

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

Answer 2

タブには本来xボタンがありません。あなたはすぐに新しいが追加選択したい場合

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

Answer 3

：あなたはどこか他のあなたのタブにある[x]ボタンを追加している、とあなたが追加した新しいタブに追加され、この同じxボタンをご希望の場合は、tabsaddイベントを使用して試みることができますタブ：

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

これは...