jQuery中对未来的元素绑定事件用bind,bind的用法简介

bind介绍

本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法。分享给大家供大家参照他事他说加以考查,具体如下:

对前途的因素绑定事件无法用bind,

bind()
方法为被选成分增多八个或四个事件管理程序,并分明事件时有发生时运营的函数。

此间分别选取后bind(eventType,[data],Listener)//data为可选参数,one()该措施绑定的事件触发二遍后自动删除,unbind(eventType,Listener),

1、可以用live代替,可是要小心jquery的本子,依照官方文档,从1.7上马就不推荐live和delegate了,1.9里就去掉live了。

语法

实例:

2、推荐用on代替(注:1.7及以上的本子才支撑)。用法:on(events,[selector],[data],fn)

$(selector).bind(event,data,function)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>unbind(eventType,listener)</title>
<style type="text/css">
<!--
img{
 border:1px solid #000000;
}
input{
 border:1px solid #570000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
 var fnMyFunc1; //函数变量
 $("img")
 .bind("click",fnMyFunc1 = function(){ //赋给函数变量
  $("#show").append("<div>点击事件1</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件2</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件3</div>");
 });
 $("input[type=button]").click(function(){
 $("img").unbind("click",fnMyFunc1); //移除事件监听myFunc1
 });
});
</script>
</head>
<body>
 <img src="11.jpg"> <input type="button" value="移除事件1">
 <div id="show"></div>
</body>
</html>

复制代码 代码如下:

event
必须。增多到成分的三个或多个事件如:click,mouseover,mouseup,change,select

再来看这段测试代码:

//放在$(function(){})里才使得
$(document).on(“click”, “#testDiv”, function(){
//此处的$(this)指$( “#testDiv”),而非$(document)
});

data
可不填。传递到函数的额外数据,如:$(selector).bind(“click”,”input”,function(){});

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

3、
当只想为每一个相配元素的一定事件(像click)绑定二个一次性的事件管理函数时,用.one()取代on就足以了,注意不是在有着的[selector]上都可以施行二次,而是在这么些[select]上总共也就实施贰遍,对前景的要素也许有效。

function(){} 必填。绑定事件触发的函数

JQuery代码:

4、如若有些div里有增加和删除改七个开关供给绑定事件,像上面那几个写:

bind绑定三个函数

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

复制代码 代码如下:

$("button").bind({ // 注意它的格式是 json
  click:function(){$("div").css("border","5px solid orange");},
  mouseover:function(){$("div").css("background-color","red");}, 
  mouseout:function(){$("div").css("background-color","#FFFFFF");} 
 });

alert(“aaaa”)会实行三回,在事变嵌套事件中,不指望见到如此的事态,供给把上层事件禁止使用,此时可引进bind和unbind函数消除。

$(‘#btn-add’).click(function(){});
$(‘#btn-del’).click(function(){});
$(‘#btn-edit’).click(function(){});

4.bind绑定数据

引进函数:

如此那般写的害处:看不出三者的构造联系,未有理由事件冒泡。

// bind() 绑定 click 事件传 参数2 并且打印出 参数2
 $('button').bind('click',['路飞','索隆','乌索普'],function(event){
  alert(event.data[0]); // 路飞
 });
for (var i = 0; i < 3; i++) {
$("input[type='button']").unbind("click");
$("input[type='button']").bind("click", function(){
alert("aaa");
});
}

看望CoffeeDeveloper的对jQuery的风云绑定的一部分思维
推荐的办法吧,能够写成这么:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图