这几天在写前端代码的时候遇到一个问题,可能也是大家常见的问题吧,就是我在动态添加一个元素的时候,后来给这个元素添加一个事件,但是事件未生效==,下面贴入代码:
1、未生效的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="pLabel" name="新加一条">新加一条</button>
<ul id="ulLabel">
<li class="liLabel">aaa1</li>
<li class="liLabel">aaa2</li>
<li class="liLabel">aaa3</li>
</ul>
<script type="text/javascript">
$("#pLabel").click(function(){
$("#ulLabel").append('<li class="liLabelnew">aaaQ</li>'); //动态像ul的末尾追加一个新元素
});
$('.liLabelnew').on('click',function(){
alert("ssss");
})
</script>
</body>
</html>
2、解决未生效的问题代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="pLabel" name="新加一条">新加一条</button>
<ul id="ulLabel">
<li class="liLabel">aaa1</li>
<li class="liLabel">aaa2</li>
<li class="liLabel">aaa3</li>
</ul>
<script type="text/javascript">
$("#pLabel").click(function(){
$("#ulLabel").append('<li class="liLabelnew">aaaQ</li>'); //动态像ul的末尾追加一个新元素
});
$("#ulLabel").on('click','.liLabelnew',function(){
alert("dddd");
})
</script>
</body>
</html>
总结区别
其实 点击事件是通过ul元素代理到li上的,这里就引入了一个名词“事件代理”,这里就不在细说了,这里主要说一个on()事件:
首先看一下jquery的关于on的API:
红色标注的地方是说:用于过滤触发事件的所选元素的后代的选择器字符串。如果选择器是null或省略,则当到达所选元素时,始终触发该事件。(百度翻译的,哈哈,就是这个意思啦),这里明白了这个意思就很好理解了,我们先给ul添加了点击事件,然后用过滤触发事件的所选元素的后代的选择器字符串,这样添加的事件就会生效啦。
OVER