最近做的工作需要添加微信统计,然后页面里是动态添加的模拟对话,需要给动态添加的元素添加点击复制事件。
第一就想到了JQ的bind事件,可是经过测试发现,bind事件不能给动态添加的元素进行事件添加,不能放弃啊,继续探索,终于功夫不负有心人,发现on事件可以实现这个效果。废话不多说,上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ON事件</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="content"><button>按钮</button></div>
<a href="javascript:;" onclick="add()">添加新元素</a>
<script type="text/javascript">
var add = function(){
$("#content").append('<button>按钮</button>');
}
$("body").on('click','button',function(event){
alert("这是动态添加的事件");
});
</script>
</body>
</html>
下面对on事件进行简单的说明:
概述:在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。
使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
语法:$(selector).on(events,childSelector,data,function)
events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的 null 或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
提示:如需移除事件处理程序,请使用 off()方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>off实例</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
$(this).css("background-color","pink");
});
$("button").click(function(){
$("p").off("click");
});
});
</script>
</head>
<body>
<p>点击这个段落修改它的背景颜色。</p>
<p>点击一下按钮再点击这个段落( click 事件被移除 )。</p>
<button>移除 click 事件句柄</button>
</body>
</html>