jquery追加的html无法触发js,js/jq 动态添加的元素不能触发绑定事件解决方案

场景案例，当登录账户后，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

登录成功后 ajax 将qqlogin 里的内容替换为登录用户信息，同时绑定鼠标移入移出事件在user_info 身上，但问题就出在 user_info 是动态添加的元素，必须要借助它的父元素才能绑定到事件。不然不刷新页面是无法绑定移入移出的

var str ="

"+res.data.nickname+

"

完善信息

data-url='"+$('#login_out').attr('data-url')+"'>登出

$('#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){});

一定要刷新页面才能起作用，坑死我了！！！

最后晒下成果图

image.png

image.png