JQuery tab clone not working

Question

Я использую вкладки Jquery, которые хорошо работают. Однако, когда я строю один динамически через клон JQuery, они, похоже, не работают. Клон правильно сформировался для ссылки на вкладку и содержимого табуляции. Мой код ниже:

Сгенерированный HTML ('тест' вкладка клонировали)

<div class="tabcontainer jtabcontainer"> 
    <div class="tablink jtablink"> 
    <div class="tab jtab active"> 
     <a href="#headerone">HeaderOne</a> 
    </div> 
    <div class="tab jtab"> 
     <a href="#test">test</a> 
    </div> 
    </div> 
    <div class="tabsection jtabsection" id="headerone" style="display: block;" data-label="HeaderOne">blah blah</div> 
    <div class="tabsection jtabsection" id="test" style="display: none;" data-label="test">blah blah</div> 
</div> 

Вкладки код, как показано ниже:

$(".jtab").click(function() { 
    $(this).parent().find('.jtab').removeClass("active"); 
    $(this).addClass("active"); 
    $(this).closest('.jtabcontainer').find('.jtabsection').hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); 
    return false; 
}); 

И код Клон:

var emptyBuild = []; 
$(".jsection").each(function() { 
    if($(this).attr('id') !== "basicdata"){ 
     var tabName = $(this).attr('id'); 
     emptyBuild[tabName] = []; 
     emptyBuild[tabName]['jtab'] = $(this).find(".jtab").clone(); 
     emptyBuild[tabName]['jtabsection'] = $(this).find(".jtabsection").clone(); 
    } 
}); 

$(document).on('click', ".jbadd", function (e) { 
    e.preventDefault(); 
    $(this).prop('disabled',true); 
    var sectionid = $(this).parents('.jgridcontainer').attr('id'); 
    if(sectionid == "HDRTAB"){ 
     var newtabName = $(this).parents(".jgridrow").find("[data-label='Tab Name']").val(); 
     var newtablink = emptyBuild['headerfields']['jtab']; 
     var newtabsection = emptyBuild['headerfields']['jtabsection']; 
     $('#headerfields').find('.jtab').removeClass('active'); 
     newtablink.find('a').attr("href","#"+newtabName).html(newtabName); 
     newtabsection.attr('id',newtabName).attr('data-label',newtabName).find('.lgndmaster').html(newtabName); 
     $('#headerfields').find('.jtablink').append(newtablink); 
     $('#headerfields').find('.jtabcontainer').append(newtabsection); 
    }   
}); 

Я не уверен, что здесь происходит не так. Даже вкладка, которая была клонирована, не отвечает на клики. Новое содержимое вкладки не открывается и не активируется при нажатии.

Примечание: это НЕ вкладки JQuery-UI.

Answer 1

Поскольку вы добавляете табы dynamically, вам необходимо сделать event delegation здесь, где вы уже писались для .jbadd. Таким образом изменить ваш event обработки click на вкладках следующим образом:

$(document).on('click','.jtab',function() { 
    $(this).parent().find('.jtab').removeClass("active"); 
    $(this).addClass("active"); 
    $(this).closest('.jtabcontainer').find('.jtabsection').hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); 
    return false; 
});