livequery解决新增对象方法的绑定

遇到问题:在html里新增的一个对象,jquery调用其方法无效

我在做一个图片异步上传功能如图所示

就是选择文件异步上传后会在页面生成预览图,新增的对象,进行点击等事件是无效的,之前做日期选择的时候也遇到过这样的问题,后来的解决方案是用

$(document).on('click','.xxx',function(event){
    ...
});

用.on()的方法绑定方法,问题都不大的.以下是删除图片操作

//图片删除
$(document).on('click', '.glyphicon-trash', function(event) {
	event.preventDefault();
	/* Act on the event */
	var div=$(this).parents('div.col-md-3');
	var img_url=div.find('.img').attr('src');
	// alert(img_url);
	$.ajax({
		url: '{:U("Index/del",null,false)}',
		type: 'POST',
		// dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
		data: {url: img_url},
		success:function(data){
			if (!data['status']) {
				alert(data['info']);
				exit;
			}else{
				alert(data['info']);
				div.fadeOut(2000);
				div.remove();
			};
		}
	});			
				
});

本来这样了也不会用到livequery了,可是在做第一个功能"复制图片的地址"时,用到了jquery.zclip插件,这个插件的用法是.zclip(...)

$('.glyphicon-cloud-download').zclip({
	path:'__PUBLIC__/js/jquery.zclip/ZeroClipboard.swf',
	copy:function(){
		return $(this).parents('div.col-md-3').find('.img').attr('src');						
	},
	afterCopy:function(){
		alert('ok');
	},
});

对于新增的对象,以上的代码不响应了,然后我尝试了以上.on(..)的方法

$(document).on('click', '.glyphicon-cloud-download', function(event) {
	event.preventDefault();
	/* Act on the event */
	$(this).zclip({
		path:'__PUBLIC__/js/jquery.zclip/ZeroClipboard.swf',
		copy:function(){
			return $(this).parents('div.col-md-3').find('.img').attr('src');						
		},
		afterCopy:function(){
			alert('ok');
		},
	});
});

用这个的话要点击两次以上的按钮才有复制效果,也不知道问题出现在哪里.

后来在网络上看到了用livequery可以解决新增对象的问题,然后看了几篇文章

jQuery插件 -- 动态事件绑定插件jquery.livequery.js

动态绑定事件插件—livequery

发现了livequery的好处:

动态事件绑定插件livequery， 可以利用它给相应的DOM元素注册事件或者触发回调函数。不仅当选择器匹配的元素会被绑定事件，而且后来通过JavaScript添加的元素都会被绑定事件。当元素不再和选择器匹配时，livequery会自动取消事件注册，使得开发者不再需要关注HTML元素的来源，只需要关注如何编写其绑定的事件即可通过jQuery选择器选择一个DOM元素，livequery插件会实时地在整个DOM范围将其持久化。这意味着无论元素是先前存在的还是后来动态加载的，事件都会被绑定，就像是CSS给元素添加样式一样。

livequery的两种用法:

1直接绑定方法(不限于click),这个跟我之前用的.on()效果类似

$('*').livequery('click', function(event) { 
        alert('clicked'); 
        return false; 
});

2 这就是我想要的功能

$('li').livequery(function(){ 
    // use the helper function hover to bind a mouseover and mouseout event 
        $(this).hover(function() { 
                $(this).addClass('hover'); 
            }, function() { 
                $(this).removeClass('hover'); 
            }); 
    }, function() { 
        // unbind the mouseover and mouseout events 
        $(this) 
            .unbind('mouseover') 
            .unbind('mouseout'); 
});

具体介绍可以参考以上的两篇博文.

不过他们提供的链接我都没能成功的下载,可能是万恶的防火墙吧!不过后来还是然后我找到了1.0.2版本

锋利的JQuery实例下载 展示 jquery.livequery.js源代码

怕哪天这个链接也失效,俺还是备份了一下

上传到csdn的资源了,http://download.csdn.net/detail/hbh112233abc/8711959

最终修改的代码如下:

//复制图片地址
$('.glyphicon-cloud-download').livequery(function(){
	$(this).zclip({
		path:'__PUBLIC__/js/jquery.zclip/ZeroClipboard.swf',
		copy:function(){
			return $(this).parents('div.col-md-3').find('.img').attr('src');						
		},
		afterCopy:function(){
			
		},
	});
});

终于能够点击复制到粘贴板了!

感谢jquery,jquery.zclip,livequery