JQuery 选项卡克隆不起作用

Question

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

已生成 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，您需要在此处执行 event delegation，您已经为 .jbadd 编写了该操作。因此，按如下方式更改选项卡上处理 click 的 event：

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

JQuery 选项卡克隆不起作用

JQuery tab clone not working

jquery

tabs

clone