每个人书写代码的习惯都不同吃,思想也都不一样,但在工作中为了减少工作量与时间,难免遇到要用别人写的代码。这次在使用同事的代码中,偶然发现的问题,因为js不好,所以一眼也没发现问题所在,查了查网上才知道这是由于重复绑定导致的。如下所示:
function showAlt(){
if($("div.alert").length > 0){
$("div.alert").show();
}else{
var html = '<div class="alert" style="border:1px solid #ccc; padding:20px;">hello world!</div>';
$("body").append(html);
}
$(".alert").on("click",function(){
console.log("alert1");
$(this).hide();
});
}
$("#login").click(function(){
showAlt();
});
那么,每次点击无论div.alert是否存在、是否绑定过函数,都会再次绑定函数,这就导致了函数多次绑定与多次执行,解决办法如下:
方法1. 在首次加载该标签时绑定即可,如果页面已存在节点说明其已经绑定过,无需再绑定,这样就避免了函数的多次绑定与执行。
function showAlt(){
if($("div.alert").length > 0){
$("div.alert").show();
}else{
var html = '<div class="alert" style="border:1px solid #ccc; padding:20px;">hello world!</div>';
$("body").append(html);
$(".alert").on("click",function(){
console.log("alert1");
$(this).hide();
});
}
}
方法2. 每次绑定前先解绑,这里用到了unbind()
function showAlt(){
if($("div.alert").length > 0){
$("div.alert").show();
}else{
var html = '<div class="alert" style="border:1px solid #ccc; padding:20px;">hello world!</div>';
$("body").append(html);
}
$(".alert").unbind("click").on("click",function(){
console.log("alert1");
$(this).hide();
});
}
如果用的是方法live(貌似jq1.8版本后就取消了这个函数了)绑定的函数,那就需要die()了
方法3. 使用事件委托为标签绑定函数,事件委托的方法有on()、delegate(),这里就不过多介绍了
function showAlt(){
if($("div.alert").length > 0){
$("div.alert").show();
}else{
var html = '<div class="alert" style="border:1px solid #ccc; padding:20px;">hello world!</div>';
$("body").append(html);
}
}
$("body").on("click",".alert",function(){
console.log("alert1");
$(this).hide();
});