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

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

jQuery中动态添加元素

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery事件绑定</title>
</head>
<body>
    <script src="http://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body>
<

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

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

对以上js代码做如下修改

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

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

如果使用了第三方插件

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

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

jQuery中动态添加元素

如果使用了第三方插件

推荐阅读更多精彩内容