js中动态添加标签后的问题

在实际开发中经常会遇到动态向html文档中添加标签的操作，这些动态添加的标签虽然有绑定好的事件或者js交互效果，可是都已经无法执行了。这个要从何说起呢？。。。。。。

jQuery中动态添加元素

在js代码中动态的添加一些div标签，为div绑定click事件。

    
    


    
    

<

通过此处的代码添加的事件无法执行alert效果

var btn = $('添加元素')
$('body').append(btn)
// 通过bind可以为已经存在的元素绑定事件
$('div').bind('click',function(){
    alert('div is clicked!')
})
// bind只能为已经存在的元素绑定事件
// 点击按钮之后 在页面上动态的创建div标签
btn.bind('click',function(){
    var div = $('
')
    div.css({
        backgroundColor:'red',
        width:'200px',
        height:'180px'
    })
    $('body').append(div)
})

对以上js代码做如下修改

var btn = $('添加元素')
$('body').append(btn)
// 通过on可以为已经存在或者动态添加的元素绑定事件
$('body').on('click','div',function(){
    alert('div is clicked!')
})
// bing只能为已经存在的元素绑定事件
btn.bind('click',function(){
    var div = $('
')
    div.css({
        backgroundColor:'red',
        width:'200px',
        height:'180px'
    })
    $('body').append(div)
}

关于js中bind和on的区别可以查看官方文档

---

如果使用了第三方插件

最简单的方法就是在添加html标签之后把插件的js调用方法在重新调用一次