JQuery中bind和unbind函数转载: https://blog.csdn.net/liucheng417/article/details/51131982
页面代码:
<body>
<input type="button" name="aaa" value="点击我">
<input type="checkbox" name="checkbox1">
</body>
JQuery代码:
$().ready(function(){
for (var i = 0; i < 3; i++) {
$("input[type='button']").click(function(){
alert("aaaa");
});
}
}
执行结果：alert("aaaa")会执行三次。在事件嵌套事件中，不希望看到这样的情况，需要把上层事件禁用，此时可引入bind和unbind函数解决。
JQuery引入函数:
for (var i = 0; i < 3; i++) {
$("input[type='button']").unbind("click");
$("input[type='button']").bind("click", function(){
//上面两句等价于$("input[type='button']").unbind("click").bind("click", function(){
alert("aaa");
});
}
执行结果：alert("aaa");仅执行一次。
与onclick区分
业务场景：
当需对某个按钮添加单击事件，为了控制重复点击，需点击完后立马去掉单击事件。
$(function(){
$('#btn').bind('click', aa);
});
function aa(){
$("#btn").unbind("click");
...
//在需要重新绑定点击事件时
$('#btn').bind('click', aa);
}
优点：基本兼容所有浏览器
做法2：
在button按钮上添加onclick事件。
点击onclick后调用aa()方法。
function aa(){
$("#btn").removeAttr("onclick");
...
//在需要重新绑定点击事件时
$("#btn).attr("onclick“,"aa()");
}
缺点：在IE7及以下不兼容。