[前端交互]利用jQuery的delegate或live给动态DOM绑定事件
时间:2011-09-23来源:源艺工作室
今天遇到这样一个问题,页面用了到了jiathis的分享代码,如下:
代码如下:
- <!-- JiaThis Button BEGIN -->
- <div id="ckepop">
- <span class="jiathis_txt">分享到:</span>
- <a class="jiathis_button_qzone"></a>
- <a class="jiathis_button_tsina"></a>
- <a class="jiathis_button_tqq"></a>
- <a class="jiathis_button_renren"></a>
- <a class="jiathis_button_kaixin001"></a>
- <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
- </div>
- <script type="text/javascript" src="http://v2.jiathis.com/code/jia.js" charset="utf-8"></script>
- <!-- JiaThis Button END -->
从上面的代码可以看出,已经显示的DOM A元素只有几条,更多的是在“+”号里面显示
现在要实现的:给所有分享的按钮加上CLICK事件
通常的写法:
- $("a").click(function(){
- alert("OK");
- });
现有的DOM的是可以绑定这个事件了,但“+”号里面的却梆定不了!
这时我们可以用delegate或live来实现
如下:
- $("div").delegate("a","click",function(){
- alert("OK");
- });
- $("a",$("#ckepop")).live('click',function(){
- alert('OK');
- })
现在来了解下delegate()和live()的定义就明白了:
delegate()定义:
为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
live()定义:
为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
编辑:源艺工作室
发表评论相关评论: