JQuery选项卡克隆不起作用

Question

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

生成的 HTML（'test' 是克隆的选项卡）

<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，因此您需要在此处执行您已经为.jbadd 编写的event delegation。所以改变你的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;
});