返回顶部

[前端交互]利用jQuery的delegate或live给动态DOM绑定事件

时间:2011-09-23来源:源艺工作室

今天遇到这样一个问题,页面用了到了jiathis的分享代码,如下:

分享到:            

 

代码如下:

Code:
  1. <!-- JiaThis Button BEGIN -->   
  2. <div id="ckepop">   
  3.     <span class="jiathis_txt">分享到:</span>   
  4.     <a class="jiathis_button_qzone"></a>   
  5.     <a class="jiathis_button_tsina"></a>   
  6.     <a class="jiathis_button_tqq"></a>   
  7.     <a class="jiathis_button_renren"></a>   
  8.     <a class="jiathis_button_kaixin001"></a>   
  9.     <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>   
  10. </div>   
  11. <script type="text/javascript" src="http://v2.jiathis.com/code/jia.js" charset="utf-8"></script>   
  12. <!-- JiaThis Button END -->  

从上面的代码可以看出,已经显示的DOM A元素只有几条,更多的是在“+”号里面显示

现在要实现的:给所有分享的按钮加上CLICK事件

通常的写法:

Code:
  1. $("a").click(function(){   
  2. alert("OK");   
  3. });   

现有的DOM的是可以绑定这个事件了,但“+”号里面的却梆定不了!

这时我们可以用delegate或live来实现

如下:

Code:
  1. $("div").delegate("a","click",function(){   
  2. alert("OK");   
  3. });  
Code:
  1. $("a",$("#ckepop")).live('click',function(){   
  2. alert('OK');   
  3. })  

 现在来了解下delegate()和live()的定义就明白了:

delegate()定义:

为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

 live()定义:

为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

编辑:源艺工作室
发表评论相关评论:
前端交互
前端优化及工具
DIV+CSS
CSS基础及常用代码
W3C
Actionscript/Flex
FLA源码及flash应用
Javascript/Ajax
Javascript对象(Object)
Javascript方法(Method)
Javascript属性(Attribute)
Ajax
JS插件
jQuery框架
HTML
HTML基础及探讨