Question

我真的需要代码大师或专家的帮助。

我无法理解为什么在下面的现有代码中，一旦创建了新的选项卡，在调用add_new_tab（）函数之后，当我将活动选项卡更改为另一个选项卡，然后再单击新创建的选项卡，我看到活动类没有应用于LI以及选项卡内容不会被切换。

当我的一切正常工作时，我正试图将头发弄出来，试图将其弄清楚（只是没有使用新创建的标签）。

这是我的html标记：

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery-1.12.4.js"></script>

<style type="text/css">
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid rgb(109,109,109);
    border-left: 1px solid rgb(109,109,109);
    width: 100%;
    display: flex;
    position: relative;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 32px;
    line-height: 32px;
    border-top: 1px solid rgb(109,109,109);
    border-right: 1px solid rgb(109,109,109);
    border-bottom: 1px solid rgb(109,109,109);
    border-left: none;
    margin-bottom: -1px;
    background: #e0e0e0;
    overflow: hidden;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 8pt;
    padding: 0 20px;
    border: 1px solid #fff;
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}   
html ul.tabs li.active, html ul.tabs li.active a:hover  {
    background: #fff;
    border-bottom: 0;
    font-weight: bold;
}
.tab_container {
    border: 1px solid rgb(109,109,109);
    border-top: none;
    clear: both;
    float: left; 
    width: 100%;
    background: #fff;
    width: 100%;
    height: 500px;
   padding: 2px;
}
.tab_wrapper {
    background: rgb(231,231,226);
    height: 100%;
}
.tab_content {
    padding: 10px;
}

</style>

<script type="text/javascript">
$(document).ready(function() {

    init_form()

});



function init_form() {

    //INITIALIZE TABS
    $(".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").on('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 rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;       
    });



}

function add_new_tab() {

    var num_tabs = $("ul.tabs li").length

    var fileno =  ( $("#fileno").val() ) ? $("#fileno").val() : '(New)'

    //debug: alert(num_tabs)

    if (num_tabs == 0) {
        $(".tabs").show()
        $(".tab_container").show()
    }

    $("ul.tabs li").removeClass("active"); //Remove any previous "active" class set on any tabs

    $(".tab_content").hide(); //Hide all previous tab content

    $("ul.tabs").append("<div class='close_wrapper'><li class='active'><a href='#tab" + num_tabs + "'>"+ fileno +"</a><span class='close'></span></li></div>").show()

    $(".tab_wrapper").append("<div id='tab" + num_tabs +"' class='tab_content'>I've inserted a new tab for you</div>").hide().fadeIn() //INSERTS NEW TAB CONTENT

}
</script>

</head>

<body>

</body>

</html>

Answer 1

请尝试在过滤器上使用jQuery。简单使用on不会对新创建的元素进行广告监听。

$("ul.tabs").on('click', 'li' ,function() {

/* Your function code goes here. */

});

Answer 2

将新元素插入DOM时，需要使用event delegation。基本上不是在<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd" > <suite name="MySuite" parallel="tests" thread-count="10" preserve-order="false"> <parameter name="sauceOs" value="win7" /> <test name="testName"> <method-selectors> <method-selector> <script language="beanshell"><![CDATA[ method.getDeclaringClass().getSimpleName().startsWith("ClassNamePrefix") ]]></script> </method-selector> </method-selectors> <packages> <package name="packageName"></package> </packages> </test> </suite>上调用方法，而是在父元素上执行。否则，您只是将事件处理程序分配给页面上的元素：

<li/>

Answer 3

新创建的li未附加点击事件。试试这个。

<div class="wrapper">
<div style="width: 62.5%">
<div style='position: relative; width: 100%; height: 0px; padding-
bottom: 56.3%;'>
<a><object style='position: absolute; left: 27.8%; top: 0px; width: 
100%; height: 231%' type="application/pdf" data="resume.pdf" 
class="border"></a>
</div>
</div>
</div>

在新创建的UL LI元素上单击事件

3 个答案: