jQuery如何获取动态添加的元素
1. 使⽤ on()⽅法
本质上使⽤了事件委派，将事件委派在⽗元素⾝上
⾃ jQuery 版本 1.7 起，on() ⽅法是 bind()、live() 和 delegate() ⽅法的新的替代品，但是由于on()⽅法必须有事件，没有事件时可选择delegate()；
下例为选项卡：
⽗元素： .main .left
⼦元素： li
$("⽗元素").on("click","⼦元素",function(){
var index=$(this).index();
jquery在一个元素后追加标签$(".main .right").find('li').css({"background":"#F4F4F4","color":"#333"});
$(this).css({"background":"#fff","color":"#46c6ff"});
$(".main .left").find('li').hide();
$(".main .left").find('li').eq(index).show();
});
2. on()可以获取动态元素，必须有事件
delegate() 可以获取动态元素，可以没事件
live() 可以获取动态元素，jQuery 1.9已弃⽤，必须有事件
bind() 只能获取静态元素，不能获取动态元素，必须有事件
⼀、问题描述
⽤jQuery的append()⽅法动态添加了⼀段html代码之后，发现在为新添加的元素绑定click事件时⽆法获取该新元素。
⼆、解决⽅法
度娘推荐的⽅法基本是⽤live()⽅法
live() ⽅法为被选元素附加⼀个或多个事件处理程序，并规定当这些事件发⽣时运⾏的函数。通过 live() ⽅法附加的事件处理程序适⽤于匹配选择器的当前及未来的元素（⽐如由脚本创建的新元素）。
live()的详细使⽤⽅法可以查看jQuery live()
live()和bind()的区别就是live不仅可以给页⾯中现有的元素绑定事件，还可以给将来动态添加进来的元素绑定事件。
于是我⽤live()替换了bind()，但报出了新错误：TypeError: $(...).live is not a function
经过查询以后发现，原来是jQuery 1.9及其以上已经⽆法使⽤live（），可以⽤on()⽅法代替live().
on()的官⽅定义和⽤法:
on() ⽅法在被选元素及⼦元素上添加⼀个或多个事件处理程序。⾃ jQuery 版本 1.7 起，on() ⽅法是 bind()、live() 和 delegate() ⽅法的新的替代品。
注意：使⽤ on() ⽅法添加的事件处理程序适⽤于当前及未来的元素（⽐如由脚本创建的新元素）。
on()的详细使⽤⽅法可以查看jQuery on()
三、代码演⽰
html页⾯：
1 2 3 4 5 6 7 8 9 10 11 12 13<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery on()⽅法测试</title>
</head>
<body>
<button id="click1">Click me!</button> <p>Hello,</p>
<script src="js/jquery.min.js"></script> <script src="js/test.js"></script>
</body>
</html>
test.js：
1 2 3 4 5 6 7 8 9$().ready(function(){
$("#click1").bind("click",function(){
$("p").append("<div class='new'><b>I'm clicked!</b></div>"); });
//on⽅法要先到原选择器（p)，再到动态添加的选择器（.new) $("p").on("click",".new",function(){
$(this).remove();
});
});
test.js中第6⾏实现了为动态添加的.new元素绑定click事件。应注意的是，虽然是为.new绑定事件，但on()⽅法却是绑定在原选择器<p>上的，然后将.new放在了参数列表
中，原理参照上⽂on()的官⽅定义和⽤法。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论