在实际开发中经常会遇到动态向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调用方法在重新调用一次
网友评论