Javascript 单击新创建的UL LI元素上的事件
我真的需要一位代码大师或专家的帮助 我不明白的是，为什么在我下面的现有代码中，一旦创建了一个新选项卡，调用add_new_tab（）函数后，当我将活动选项卡更改为另一个选项卡，然后单击新创建的选项卡上的上一步，我看到活动类没有应用到LI，选项卡内容也没有被切换 当其他一切都正常工作时（只是不使用新创建的选项卡），我正在绞尽脑汁试图弄清楚这一点 以下是我的html标记：Javascript 单击新创建的UL LI元素上的事件,javascript,jquery,html,html-lists,Javascript,Jquery,Html,Html Lists,我真的需要一位代码大师或专家的帮助 我不明白的是，为什么在我下面的现有代码中，一旦创建了一个新选项卡，调用add_new_tab（）函数后，当我将活动选项卡更改为另一个选项卡，然后单击新创建的选项卡上的上一步，我看到活动类没有应用到LI，选项卡内容也没有被切换 当其他一切都正常工作时（只是不使用新创建的选项卡），我正在绞尽脑汁试图弄清楚这一点 以下是我的html标记： <!DOCTYPE html> <html> <head> <script ty
<!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>
ul标签{
保证金：0；
填充：0；
浮动：左；
列表样式：无；
高度：32px；
边框底部：1px实心rgb（109109）；
左边框：1px实心rgb（109109）；
宽度：100%；
显示器：flex；
位置：相对位置；
}
李先生{
浮动：左；
保证金：0；
填充：0；
高度：32px；
线高：32px；
边框顶部：1px实心rgb（109109）；
右边框：1px实心rgb（109109）；
边框底部：1px实心rgb（109109）；
左边界：无；
边缘底部：-1px；
背景：#e0；
溢出：隐藏；
}
ul.lia{
文字装饰：无；
颜色：#000；
显示：块；
字号：8pt；
填充：0 20px；
边框：1px实心#fff；
大纲：无；
}
ul.a:悬停{
背景：#ccc；
}
html ul.tabs li.active，html ul.tabs li.active a:悬停{
背景：#fff；
边界底部：0；
字体大小：粗体；
}
.tab_容器{
边框：1px实心rgb（109109）；
边界顶部：无；
明确：两者皆有；
浮动：左；
宽度：100%；
背景：#fff；
宽度：100%；
高度：500px；
填充：2px；
}
.tab_包装{
背景：rgb（231226）；
身高：100%；
}
.tab_内容{
填充：10px；
}
$（文档）.ready（函数（）{
初始形式（）
});
函数init_form（）{
//初始化选项卡
$（“.tab_content”）.hide（）；//隐藏所有内容
$（“ul.tabs li:first”）.addClass（“active”）.show（）；//激活第一个选项卡
$（“.tab_content:first”）.show（）；//显示第一个选项卡内容
//点击事件
$（“ul.tabs li”）。在（'click'，function（）上{
$（“ul.tabs li”）.removeClass（“active”）；//删除任何“active”类
$（this）.addClass（“active”）；//将“active”类添加到所选选项卡
$（“.tab_content”）.hide（）；//隐藏所有选项卡内容
var activeTab=$（this）.find（“a”）.attr（“href”）；//查找rel属性值以标识活动选项卡+内容
$（activeTab）.fadeIn（）；//淡入活动内容
返回false；
});
}
函数添加新选项卡（）{
var num_tabs=$（“ul.tabs li”）.length
var fileno=（$（“#fileno”）.val（））？$（“#fileno”）.val（）：'（新的）'
//调试：警报（num_选项卡）
if（num_tabs==0）{
$（“.tabs”）.show（）
$（“.tab_容器”）.show（）
}
$（“ul.tabs li”）.removeClass（“active”）；//删除任何选项卡上以前设置的任何“active”类
$（“.tab_content”）.hide（）；//隐藏所有以前的选项卡内容
$（“ul.tabs”）.append（“”）.show（）
$（“.tab_wrapper”）.append（“我为您插入了一个新选项卡”）.hide（）.fadeIn（）//插入新选项卡内容
}
$('ul.tabs').on('click', 'li', function() {
...
});
向DOM插入新元素时，需要使用。基本上不是在
$('ul.tabs').on('click', 'li', function() {
...
});
不会为新创建的li附加单击事件。试试这个
$("ul.tabs").on('click', 'li' ,function() {
/* Your function code goes here. */
});
不会为新创建的li附加单击事件。试试这个
$("ul.tabs").on('click', 'li' ,function() {
/* Your function code goes here. */
});
请尝试将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;
});
请尝试将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;
});
请创建一个演示，您还没有共享html标记<代码>$（“ul.tabs”）。在（'click'，li'，function（）{而不是
$（“ul.tabs li”）。在（'click'，function（）{$（“ul.tabs li”）。在（'click'，function（）{