jQuery中on方法及动态绑定问题的解决

 

.on ( type，selector，data，callBackFn) :

可绑定一个或多个任何事件类型（自定义事件也可以绑定，但要通过trigger触发）；

四个参数：

参数一-------------type：绑定的事件类型，绑定多个事件中间用空格区分；（必选）

参数二-------------selector：选择器，css选择器，字符串形式的（可选）

参数三-------------data：传递的参数，不能是字符串，e.data可拿到参数（可选）

参数四-------------callBackFn：回调函数（必选）

eg：如果参数二是字符串形式，执行时会当做一个选择器，而不会当做参数来传递！

<div class="box">
    <p></p>
</div>
<script>
    $(".box").on("mouseenter","p",function(){
        alert("吕星辰")
    }")
</script>

如果想传递参数，可把参数写在对象里,通过e.data可取到传递的参数：

eg：

<div class="box">点击</div>
<script>
    $(".box").on("click",{name:"lvxingchen"},function(e){
         console.log(e.data)//{name:"lvxingchen"}
    })
</script>

这里着重说下click与on的区别：两者绑定静态元素都可以；但如果是动态创建的元素click是无效，只能使用on绑定动态的元素；

eg：需求：点击按钮一 动态 创建 按钮二，当点击按钮二时，弹出文字

<div class="box"></div>
<button>按钮一</button>
<script>
   $("button").on("click",function(){
       $(".box").append("<button class='btn'>按钮二</button>")
   })
  $(".btn").click(function(e){
    alert("吕星辰")
  })
</script>

问题来了，我们动态创建的按钮，又绑定了点击事件，点击无效！！！自己可以复制代码试下。

原因在于：

on()或者click()绑定只针对于当前存在的元素有效，而在其之后动态加入到DOM中的元素，不会绑定对应的events。

解决：

实际上jQuery也有专门的方法解决这个需求，即[.live()]，$( selector ).live( events, handler )会对所有当前和未来满足selector条件的元素绑定对应的events。

但从jQuery 1.9开始，.live()就被移除了。

在.live()的API文档中，官方就给出了替代.live()的方法，即目前最常用的方法：

$( document ).on( events, selector, data, handler );

这样就能绑定所有静态或动态元素了。。。

<div class="box"></div>
<button>按钮一</button>
<script>
   $("button").on("click",function(){
       $(".box").append("<button class='btn'>按钮二</button>")
   })
  $(document).on("click",function(e){
    alert("吕星辰")
  })
</script>