场景案例,当登录账户后,ajax 无刷新显示用户名头像,并绑定头像移入移出事件
请先看看你们的版本并对号入座:
jquery1.6版本以下都不支持on委托事件
jquery1.3 至 jQuery1.8版都支持live委托事件
jquery1.9 以后的版本不支持live委托事件,但是on事件可以替代live
一、jquery1.3版本以下的(不包括jquery1.3),是时候更新你的jquery版本了。
因为 无解无解无解无解无解无解
二、如果jquery版本是在1.3-1.8之间的话,js/jq动态添加的元素触发绑定事件的解决方法(不建议用on事件,因为1.6版本以下不支持on事件,会报错)
三、推荐使用on
click例子
$('element').live('click',function(){})
element可以是动态生成的元素,可以是它的类或者id
如果jquery版本是在1.9或者更高的话,live委托事件是被移除的,通过on来实现。js/jq动态添加的元素触发绑定事件的解决方法
注意注意:如果页面同时存在低版本的jq(1.3-1.8)和高版本jq(jquery1.9以上)的话,live委托事件会被高版本移除,最后导致虽然有jquery版本是在1.3-1.8之间,使用了live事件,页面会报错。
划重点
click例子
$('父元素').on('click', '子元素', function(){})
此时动态加载出来的元素一定要在$(‘父元素’)里面,否则绑定事件失效。换句话说,本应该绑定A元素,但是A元素是动态生成的,所以jq应该获取A元素的父元素来监听A元素是否发生click事件。
举个例子
这是我登录前的html
<div id="qqlogin">
<div class="login_reg">
<a href="javascript:;" class="login_btn" lay-submit="" lay-filter="login">登录 </a> /
<a href="javascript:;" class="reg_btn" lay-submit="" lay-filter="reg"> 注册</a>
</div>
</div>
登录成功后 ajax 将qqlogin 里的内容替换为登录用户信息,同时绑定鼠标移入移出事件在user_info 身上,但问题就出在 user_info 是动态添加的元素,必须要借助它的父元素才能绑定到事件。不然不刷新页面是无法绑定移入移出的
var str ="<div class='user_info'><div><img src='"+res.data.head_url+"' ><div>"+res.data.nickname+
"</div></div><ul><a href=''>完善信息</a><br><a href='javascript:;' id='login_out'
data-url='"+$('#login_out').attr('data-url')+"'>登出</a></ul></div>";
$('#qqlogin').html(str);
jq绑定
$(function(){
$("#qqlogin").on("mouseover mouseout",'.user_info',function(event){
if(event.type == "mouseover"){
$("#qqlogin ul").show();
}else if(event.type == "mouseout"){
$("#qqlogin ul").hide();
}
});
});
之前总是用 $("#user_info").on("mouseover mouseout",function(event){});
一定要刷新页面才能起作用,坑死我了!!!
最后晒下成果图