jquery:为动态加载的元素添加点击事件
jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。 在1.7版本以前使用live。但是在1.8版本以后推荐使用on。这里介绍jQuery中如何给动态添加的元素绑定事件。 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况。
动态加载的代码如下：最外面的div标签不是动态的。里面两个div标签是动态加载的。 需要给<div class='answer flex flex-v flex-align-center'>里面动态添加的两个<div>标签添加click事件。
<div class='question flex flex-v flex-align-center'>
<img src='/static/imgs/grdz_wt.png'>
<text></text>
</div>
<div class='answer flex flex-v flex-align-center'>
<div class='options flex flex-v flex-align-center'>
<img src='/static/imgs/grdz_xx.png'>
<text></text>
</div>
<div class='options flex flex-v flex-align-center'>
<img src='/static/imgs/grdz_xx.png'>
<text></text>
</div>
</div>
动态的加载标签元素：
<script>
$(function(){
$(".answer.flex.flex-v.flex-align-center").on("click",".options.flex.flex-v.flex-align-center",function(){
var fen = $(".rival1_score.flex.flex-v.flex-align-center text")
b = b+atime*10
fen.html(b)
a = a+1
if(a<length){
$(".question.flex.flex-v.flex-align-center text").html(questions[a].ask)
var xhtml = ""
var obj = JSON.parse(questions[a].answer);
for(var j in obj){
xhtml += "<div class='options flex flex-v flex-align-center'>";
xhtml += "<img src='/static/imgs/grdz_xx.png'>";
xhtml += "<text>"+obj[j]+"</text>";
xhtml += "</div>";
}
$(".answer.flex.flex-v.flex-align-center").html(xhtml)
atime = 11
}
})
})
</script>
解决方法如下：
<script>
// 方法一：jquery 1.7版以前使用live动态绑定事件
$(".options.flex.flex-v.flex-align-center").live("click",function(){
console.log("++++++")
});
// 方法二：jquery 1.7版以后使用on动态绑定事件
// 注意：最外层的<div class='answer flex flex-v flex-align-center'>标签一定要是html中存在的，且是静态的,否则点击事件触发不了。
// on中间的参数"div", ".options", "#id", 应该是选择器就行。
$(".answer.flex.flex-v.flex-align-center").on("click","div",function(){
console.log("------")
})
$(".answer.flex.flex-v.flex-align-center").on("click",".options.flex.flex-v.flex-align-center",function(){
console.log("++++++")
})
</script>
附加：
在jquery1.7之前的版本中用的是live()方法，但是live()方法在1.7中已经不建议使用，1.9中删除了这个方法。 live()方法适用于匹配选择器的当前及未来的元素（例如有脚本创建的新元素） 重点是自jquery1.7版本起，on()方法是bind()、live()、delegate()方法的新的替代品
on()方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素） $("#mainbody").on("click",".link",function(){ }); on前面的这个#mainbody一定要是html中存在的，静态的,否则点击事件触发不了。 ".link"是动态加载出来的内容，它的class=".link"。 on方法在什么条件下都是成立的
用jquery:为动态加载的元素添加点击事件其实也可以用 $(".link").click(function(){ }); 只不过是有限制的，这个点击事件要和动态加载的内容在同一作用域中才行。
举例代码：
<div id="testdiv">
<ul></ul>
</div>
<!-- 需要给<ul>里面动态添加的<li>标签添加click事件 -->
<script>
// jquery 1.7版以前使用live动态绑定事件
$("#testdiv ul li").live("click",function(){
//do something here
});
// jquery 1.7版以后使用on动态绑定事件
$("#testdiv ul").on("click","li", function() {
//do something here
});
</script>
