JQuery가 동적으로 javascripts 태그 닫기 버튼을 추가했습니다.

Question

javascript를 사용하여 jquery에 새 탭을 동적으로 추가하고 있습니다. 다음 코드를 사용합니다 :

제 질문은 어떻게 동적으로 추가 된 탭에 닫기 버튼 (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}와 # {라벨} 추가 방법 여기

에 인수로 전달되는 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); 
      } 
     }); 

이 작동하지 않습니다 ..