JQuery选项卡克隆不工作

我使用的Jquery选项卡工作得很好。然而，当我通过JQuery克隆动态构建一个时，它们似乎不起作用。克隆已为选项卡链接和选项卡内容正确生成。我的代码如下：

生成的HTML（“测试”是克隆的选项卡）

和克隆代码：

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选项卡。

因为您要动态添加选项卡

，所以您需要在这里执行

事件委派

，您已经为

编写了jbadd

。因此，更改处理

的
事件
，单击选项卡上的
，如下所示：

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

随时快乐编码…）
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);
    }        
});

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