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

<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){});
一定要刷新页面才能起作用，坑死我了！！！

最后晒下成果图

image.png image.png