一、错误示例:
对于自己用脚本动态生成的元素,无法绑定事件。例如:

body下的代码:

<body>
<ul>
    <li><span class="class1">11111</span></li>
    <li><span class="class1">22222</span></li>
    <li><span class="class1">33333</span></li>
</ul>
<script src="../static/js/jquery.min.js"></script>
<script>
aButton=$('li')
aButton.each(function(i){
    aButton.eq(i).attr('tag','edit')
    $(this).click(function(){
        $(this).html('<a href="#" class="active">'+i+'</a>')
    })

})



aA=$('a')

aA.each(function(i){
    console.log('kkkk')
    $(this).click(function(){
        console.log('i')
    })
})
</script>
</body>

运行结果:

当span标签被点击的时候,变成a标签,然后再点击a标签,没有任何反应。

原因:结果当生成a标签之后,无论如何点击都没有效果,因为jquery只能绑定页面本身存在的元素。动态生成的元素不能被绑定。而click事件,其实是bind('click',...)的简化形式。


二、正确的方法:

<body>
<ul>
    <li><span class="class1">11111</span></li>
    <li><span class="class1">22222</span></li>
    <li><span class="class1">33333</span></li>
</ul>
<script src="../static/js/jquery.min.js"></script>
<script>
aButton=$('li')
aButton.each(function(i){
    aButton.eq(i).attr('tag','edit')
    $(this).click(function(){
        $(this).html('<a href="#" class="active">'+i+'</a>')
    })

})


$('li').delegate('a[class=active]','click',function(){
    //获取当前动态创建元素的索引值:
    iNow=$('a[class=active]').index(this)
    console.log('iNow:',iNow)
    console.log($(this).html())
})

</script>
</body>

 运行结果:

当span标签被点击的时候,变成a标签,然后再点击a标签,console里打印出它的html内容并且打印新创建元素中被点击的索引。

iNow:0

0

iNow:1

2

结果截图如下

wKiom1YXvB6zL2l3AABQ5i8hWDE381.jpg    

    说明:

1)delegate方法,代理或者说是委托,实现原理是事件的冒泡,在指定的祖先元素中注册事件(delegate在特定元素上),元素事件触发,传播到这个元素然后进行筛选。可以在祖先元素中绑定事件,比如上面的li是祖先元素,而新生成的元素a都是li的子元素,所以动态生成的元素的事件就可以绑定了。

       delegate官网介绍:Attach a handler to one or more events for all elements that match the selector,now or in the future, based on a specific set of root elements.

      官网网址:http://api.jquery.com/delegate/

2)选择器,注意:

var a= $("input:[name^='a']");

表示所有name以a开头的input。而上面示例a[class=active],表示选中所有class为active的a标签