`

使用jQuery动态绑定事件插件livequery弥补live的不足

阅读更多
jquery1.3.2的动态绑定事件方法live不支持blur,focus,mouseenter,mouseleave,change,submit,特别是不支持blur,focus事件使我很不爽(因为我的页面需要这个功能,:)。
后来发现livequery这个插件,发现它支持blur,focus,并且还支持自定义方法,很强!于是替代了jquery自带的live,完美!
注意,新出来的jQuery1.4不用livequery这个插件也可以实现了!

I've successfully used livequery plugin as a complement to .live() function in jQuery. Not only can it bind events like focus,blur and change (that live() does not support yet, as of 1.3.2) but also it provides you with a mechanism to bind custom events to DOM elements on the fly. For example, I used it to bind draggable and droppables to some DOM elements which will be added through Ajax. It makes my code much simpler to read and easier to maintain.

//我要动态修改span中的文字
function formatUserName(value, pid){
		var span="<span class='spanModify' style='color:red' id='"+pid+"'>"+value+"</span>";
		return span;
	}
//双击span变成一个文本输入框
	$('.spanModify').live('dblclick',function(){//使用jquery自带的live动态绑定dblclick
		var id=$(this).attr('id');
		var value=$(this).text();
		var input=$("<input class='inputBlur'  type='text'>").attr({'value':value,'id':id});
		$(this).replaceWith(input);
		input.focus();
		return;
	});
//文本输入框失去焦点时变回span
	$('.inputBlur').livequery('blur',function(){//动态绑定blur,需要livequery插件
		var id=$(this).attr('id');
		var value=$(this).val();
		var span=$("<span class='spanModify' style='color:red'></span").attr({'id':id}).text(value);
		$(this).replaceWith(span);
		return;
	});

很简单实现了
分享到:
评论

相关推荐

    jquery.livequery.js

    jquery.livequery.js是jquery中的动态绑定事件所需的plugins

    前端项目-hazzik-jquery.livequery.zip

    【前端项目-hazzik-jquery.livequery.zip】是一款基于jQuery的插件,旨在解决Web开发中的一个常见问题:如何在页面动态更新后仍然能够有效地操作DOM(文档对象模型)元素。Live Query的核心特性是它能持续监控DOM...

    jQuery参考手册-事件总结

    14. **liveQuery()**: 一个非jQuery核心的插件,提供类似 `live()` 的功能,但更强大。 15. **other events**: 还有许多其他事件,如 `load()`(加载完成),`resize()`(窗口大小改变),`scroll()`(滚动事件),...

    JQuery 动态删除添加html元素bind事件

    但如果你正在维护一个旧项目,或者需要兼容较早版本的jQuery,`livequery.js`插件可能是解决动态元素事件绑定问题的一个选择。 总的来说,jQuery提供了一套强大的工具来处理HTML元素的动态操作和事件绑定。理解和...

    jQuery livequery 三个使用例子示例.rar

    这是一些jQuery livequery的小例子源码演示,我想对学习livequery是有一定帮助的,实例中一共包括三个演示文件: 第一个演示:livequery导致的超链接... ... 第三个演示:使用hover函数 绑定mouseover和mouseout事件

    前端项目-livequery.zip

    本文将深入探讨“前端项目-livequery.zip”中的核心内容——Live Query,这是一个针对jQuery的插件,专为处理动态DOM元素而设计。 Live Query的主要功能在于其能够监控DOM树的变化,并在DOM元素添加、删除或修改时...

    jquery 小例子

    `jquery.livequery.js`是jQuery的一个插件,它扩展了jQuery的`.live()`方法,使得即使在DOM改变后,已绑定的事件仍然有效。这在动态内容加载的网页中非常有用。 总结来说,这个“jQuery小例子”涵盖了jQuery的基础...

    jQuery live

    至于与流行插件liveQuery的比较,live方法不支持“无事件”的回调函数,也没有插件提供的“setup”和“cleanup”过程。这一点在某些情况下可能会限制其使用。 当需要移除使用live方法绑定的事件时,应使用die方法,...

    jQuery中.live()方法的用法深入解析

    使用livequery插件,或可以使用jquery的live方法。摘录一段live简单使用方法。 更多详情还见官网 http://api.jquery.com/live/ live(type, [data],fn) 概述 jQuery给所有匹配的元素附加一个事件处理函数,即使这个...

    jQuery live( type, fn ) 委派事件实现

    然而,由于 `live()` 方法有一些限制,例如不支持某些事件类型和不提供 `liveQuery` 插件的高级特性,所以在 jQuery 1.7 版本中,`live()` 被 `on()` 方法取代。`on()` 方法更加强大,可以处理所有类型的事件,并且...

    《JQuery1.3中文参考手册》-电子文档下载HTML

    `.delegate()`和`.live()`(在jQuery 1.7后被`.on()`取代)则用于动态添加元素时仍能响应事件。 四、动画效果 jQuery的`.animate()`方法是创建自定义动画的关键,它能改变CSS属性并创建平滑过渡。`.show()`, `....

    jquery常用函数与方法汇总

    然而,`live()`只支持一部分事件,不包括blur、focus等,且不提供`liveQuery`插件的一些特性,如无事件回调。移除`live()`绑定的事件需使用`die()`方法。 3. `jQuery die( [type ] )` 与`live()`相对应,`die()`...

Global site tag (gtag.js) - Google Analytics