通過'addTab'添加選項卡不可點擊或激活

Question

我有這些jquery選項卡，當我在頁面上選擇動態添加新選項卡時。 現在的問題是，動態/ onpage添加標籤無法再次被選中。

例如：有一個選項卡。我添加了一個新選項卡，現在我可以打開第一個選項卡，但無法再打開第二個選項卡。

這裏是jscode $（函數（）{

//When page loads... 
$(".tab_content").hide(); //Hide all content 
$("ul.tabs li:first").addClass("active").show(); //Activate first tab 
$(".tab_content:first").show(); //Show first tab content 

//On Click Event 

$("ul.tabs li").click(function() { 

    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); //Hide all tab content 

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
    $(activeTab).fadeIn(); //Fade in the active ID content 
    return false; 
}); 

    //Addtab 
     var fields = $("ul.tabs li").length; 
    $("a.pekle").click(function() {fields += 1; 
    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $("ul.tabs").append('<li class="active"><a href="#tab'+fields+'">'+fields+'. Parca</a></li>').hide().fadeIn(500); 
     $("div.tab_container").append('<div id="tab'+fields+'" class="tab_content"> Tab'+fields+'</div>'); 
    $(".tab_content").hide(); //Hide all tab content 
    $("#tab"+fields).fadeIn(); //Fade in the active ID content 
    return false;}); 
    //EndAddtab 
}); 
</script> 

HTML

<a class="pekle" onClick="addTab()">+ Parca Ekle</a> 
<ul class="tabs"> 
    <li><a href="#tab1">Parca 1</a></li> 
</ul> 
<div id="tab1" class="tab_content">blabala</div> 

Answer 1

有錯在這裏幾件事情。首先，你tab_container沒有包含在你的榜樣，我假設你想圍繞div's這樣的內容包裝它

<a class="pekle" onClick="addTab()">+ Parca Ekle</a> 
<ul class="tabs"> 
    <li><a href="#tab1">Parca 1</a></li> 
</ul> 
<div class="tab_container"> 
    <div id="tab1" class="tab_content">blabala</div> 
<div>​ 

其次，因爲您要動態添加選項卡，所以您需要使用.on()事件處理程序而不是單擊來委派點擊處理程序。

如果將新的HTML注入到頁面中，請在將新的HTML放入頁面後選擇元素和 附加事件處理程序。或者， 使用委託事件來附加事件處理程序，如下所述。

$("ul.tabs").on('click', 'li', function() { 

    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); //Hide all tab content 
    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
    $(activeTab).fadeIn(); //Fade in the active ID content 
    return false; 
}); 

You can see a working demo here。

希望有所幫助。