新创建的 UL LI 元素上的单击事件 [英] Click event on newly created UL LI element
问题描述
我真的需要代码大师或专家的帮助.
I really need the help of a code guru or expert on this one.
我无法弄清楚为什么在下面的现有代码中，一旦创建了一个新选项卡，在调用 add_new_tab() 函数之后，当我将活动选项卡更改为另一个选项卡时，然后单击返回新创建的选项卡，我看到活动类没有应用于 LI，也没有切换选项卡内容.
What I can’t figure out is why in my existing code below, once a new tab has been created, after calling the add_new_tab() function that, when I change my active tab to another tab , and then click back on the newly created tab, that I see that the active class does not get applied to the LI as well as the tab content doesn’t get switched.
当其他一切正常时，我正在努力解决这个问题(只是不是使用新创建的标签).
I am tearing the hair out of my head trying to figure this one out when everything else works as it should (just not with the newly created tab).
这是我的 html 标记:
Here is my html markup:
<!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>
推荐答案
请尝试使用带有过滤器的 jQuery.简单使用 on 不会为新创建的元素添加监听器.
Please try using jQuery on with filter. simple use of on does not ad listener to the newly created elements.
$( "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;
});
这篇关于新创建的 UL LI 元素上的单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
