新創建的UL LI元素上的Click事件

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不會使新創建的元素成為監聽器。

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

Answer 2

在將新元素插入DOM時，您需要使用事件委托 。 基本上，不是在<li/>上調用方法，而是在父元素上進行操作。 否則，您只是將事件處理程序分配給頁面上已經存在的元素：

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

Answer 3

沒有為新創建的li附加點擊事件。 嘗試這個。

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

/* Your function code goes here. */

});

新創建的UL LI元素上的Click事件

問題描述

3 個解決方案

解決方案1
3 已采納 2017-11-30 03:56:36

解決方案2
1 2017-11-30 03:55:16

解決方案3
1 2017-11-30 03:56:25

新創建的UL LI元素上的Click事件

問題描述

3 個解決方案

解決方案1 3 已采納 2017-11-30 03:56:36

解決方案2 1 2017-11-30 03:55:16

解決方案3 1 2017-11-30 03:56:25

解決方案1
3 已采納 2017-11-30 03:56:36

解決方案2
1 2017-11-30 03:55:16

解決方案3
1 2017-11-30 03:56:25