通过“addTab”添加的选项卡不可点击或激活

Question

我有这些 jquery 选项卡，当我在页面上动态添加一个新选项卡时，它会被选中。 现在的问题是动态/页面上添加的选项卡无法再次被选中。

例如：有一个标签。我添加了一个新标签，现在它被选中了，我可以打开第一个标签，但我无法再次打开第二个标签。

这里是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.

希望对您有所帮助。