JQuery中bind和unbind函数与onclick绑定事件区分

JQuery中bind和unbind函数转载:   https://blog.csdn.net/liucheng417/article/details/51131982

页面代码:

<body>
<input type="button" name="aaa" value="点击我">
<input type="checkbox" name="checkbox1">
</body>

JQuery代码:

$().ready(function(){
   for (var i = 0; i < 3; i++) {
      $("input[type='button']").click(function(){
       alert("aaaa");
      });
   }
}

执行结果:alert("aaaa")会执行三次。在事件嵌套事件中,不希望看到这样的情况,需要把上层事件禁用,此时可引入bind和unbind函数解决。

JQuery引入函数:

for (var i = 0; i < 3; i++) {

  $("input[type='button']").unbind("click");
  $("input[type='button']").bind("click", function(){

  //上面两句等价于$("input[type='button']").unbind("click").bind("click", function(){
  alert("aaa");
  });
}

执行结果:alert("aaa");仅执行一次。

与onclick区分

业务场景:

当需对某个按钮添加单击事件,为了控制重复点击,需点击完后立马去掉单击事件。

$(function(){
  $('#btn').bind('click', aa);
});

function aa(){

  $("#btn").unbind("click");

  ...

  //在需要重新绑定点击事件时

  $('#btn').bind('click', aa);

}

优点:基本兼容所有浏览器

做法2:

在button按钮上添加onclick事件。

点击onclick后调用aa()方法。

function aa(){

$("#btn").removeAttr("onclick");

...

//在需要重新绑定点击事件时

$("#btn).attr("onclick“,"aa()");

}

缺点:在IE7及以下不兼容。

上一篇:[Bzoj3675][Apio2014]序列分割(斜率优化)


下一篇:BZOJ3675 [Apio2014]序列分割 【斜率优化dp】