新创建的UL LI元素上的Click事件
[英]Click event on newly created UL LI element
问题描述
I really need the help of a code guru or expert on this one. 
我真的需要一位代码专家或专家的帮助。
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. 我不知道的是为什么在下面的现有代码中，一旦调用add_new_tab（）函数后创建了新标签，当我将活动标签更改为另一个标签，然后单击新创建的标签后，为什么标签，我看到活动类没有应用到LI，并且标签内容也没有切换。
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). 我想把头发弄乱了，试图在其他一切正常工作时解决这一问题（只是不使用新创建的选项卡）。
Here is my html markup: 这是我的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>
3 个解决方案
解决方案1
3 已采纳 2017-11-30 03:56:36
Please try using jQuery on with filter. 请尝试在过滤器上使用jQuery。 simple use of on does not ad listener to the newly created elements. 简单使用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;
});
解决方案2
1 2017-11-30 03:55:16
When inserting new elements to the DOM, you need to use event delegation . 在将新元素插入DOM时，您需要使用事件委托 。 Basically instead of invoking the method on the <li/> s, you do it on a parent element. 基本上，不是在<li/>上调用方法，而是在父元素上进行操作。 Otherwise you're just assigning the event handler to the elements already on the page : 否则，您只是将事件处理程序分配给页面上已经存在的元素：
$('ul.tabs').on('click', 'li', function() {
...
});
解决方案3
1 2017-11-30 03:56:25
Click events are not attached for the newly created li. 没有为新创建的li附加点击事件。 Try this. 尝试这个。
$("ul.tabs").on('click', 'li' ,function() {
/* Your function code goes here. */
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.