jQuery：给动态加载的标签元素绑定事件的方法

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>