遇到问题:在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, 可以利用它给相应的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