JQuery事件的绑定

关于jQuery事件绑定
html:

<a href="#" onclick="addBtn()">addBtn</a>

<div id="mDiv">

<button class="cBtn" onclick="alert(11111)">button1</button>

<button class="cBtn">button2</button>

<button class="cBtn">button3</button>

</div>

javascript:

1 <script type="text/javascript">
 2  function addBtn(){
 3             $(‘#mDiv‘).append(‘ <button class="cBtn">button5</button>‘)
 4  }
 5 jQuery(function($){
 6 //使用on代替live和delegate(live由于性能原因已经被废弃,被delegate代替),新添加到mDiv的button依然会有绑定的事件
 7 $(‘#mDiv‘).on(‘click‘,‘.cBtn‘,function(index, eleDom){
 8 alert($(this).html())
 9  });
10 //使用on代替bind
11 $(‘.cBtn‘).on(‘click‘,function(){
12 alert($(this).html())
13  })
14 //注意:
15 /*
16 1、无论使用bind、on、delegate、click(function())都是重复绑定,即绑定的同类型事件被放到一个事件队列中,依次执行,后绑定的事件不会替换之前绑定的,对于on使用off,delegate用undelegate,bind及click使用unbind来解除绑定,例如unbind(type)传递为事件类型,如果不传type则解出所有事件绑定;需要注意的是元素本身自带的事件无法unbind(如button1)
17 2、要绑定自定义事件,如‘open‘,以上函数都可以使用,但激活需要使用trigger
18
19 总结:
20 建议使用on函数,绑定形式为$(‘.myClass‘).on({
21 click:function(eleDom){
22 ...do someting...
23 },
24 dbclick:function(eleDom){
25 ...do someting...
26 }
27 ....
28 })
29 */
30 }
31 </script>

一些说明:

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数

$("a").bind("click",function(){alert("ok");});
live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的

$("a").live("click",function(){alert("ok");});
delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

$("#container").delegate("a","click",function(){alert("ok");})
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

差别:

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。

.delegate()则是更精确的小范围使用事件代理,性能优于.live()

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

时间: 2024-10-19 16:22:02

JQuery事件的绑定的相关文章

jquery事件重复绑定解决办法

jquery事件重复绑定解决办法 一$.fn.live 重复绑定 解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件. //先通过die()方法解除,再通过live()绑定$(“#selectAll”).die().live(“click”,function(){//事件运行代码}); 二click等事件 解决:使用unbind("click")方法先解除绑定的事件再绑定新事件,即在给对象绑定事件之前先移除该

jquery事件重复绑定

本文实例分析了jQuery防止重复绑定事件的解决方法.分享给大家供大家参考,具体如下: 一.问题: 今天发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行. 下面是一个click事件被重复绑定的示例: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 function reg_button_click(){   $("#button).click(function(){     alert("button click");   }

jquery事件重复绑定的快速解决方法

click等事件 解决:使用unbind("click")方法先解除绑定的事件再绑定新事件,即在给对象绑定事件之前先移除该对象上的原有事件 1 $("#test2").unbind('click').click(function() { 2 alert("click解除绑定执行" + k++ + "次"); 3 }); 转自:http://www.cnblogs.com/shiyou00/p/5531049.html

jquery事件与绑定事件

1.首先,我们来看一下经常使用的添加事件的方式: <input type="button" id="btn" value="click me!" onclick="shao();" /> <script type="text/javascript"> function shao() { alert("msg is showing!"); } </script

jQuery事件绑定和委托实例

本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: 复制代码代码如下: $("#div1").click(function() {      alert("点击后触发");  }); 上面的事件绑定,我们可以通过多种方式去实现: 1. on() 复制代码代

jQuery事件绑定和委托

jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: Js代码   $("#div1").click(function() { alert("点击后触发"); }); 上面的事件绑定,我们可以通过多种方式去实现: 1. on() Js代码   //无数据参数 $("p").on("click", 

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } 以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了.现在主要用on,使用on的时候

jQuery学习-事件之绑定事件(七)

今天来说说事件中的handlers方法中的一个片段 1 matches[ sel ] = handleObj.needsContext ?  2     jQuery( sel, this ).index( cur ) >= 0 :  3     jQuery.find( sel, this, null, [ cur ] ).length;  4 /*  5  这是handler是方法中过滤委托的方法.等价于  6 if(handleObj.needsContext){  7     match

jQuery学习-事件之绑定事件(三)

在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event, handlers ) {         var sel, handleObj, matches, i,             handlerQueue = [],             delegateCount = handlers.delegateCount,             cur =