WebUploader在display none无法运行

金拱门 发布于 2015/05/27 14:26
阅读 6K+
收藏 2

踩坑了!刚才发现,我现在设置div为 display:none 。当显示时,上传按钮怎样点击都没效果。 谷歌和github找了好久都没找到解决方法。

好像WebUploader目前也不是很多人在用啊。感觉踩坑了。只能换写法了。

以下是问题补充:

@金拱门:暂时先按照@aqpuppet 所说的,移除display none。等页面加载再补上去。让事件先绑定好。 (2015/05/27 15:37)
加载中
1
说吧空间
说吧空间

我知道一个解决的办法 position: absolute; opacity: 0; filter:Alpha(opacity=0);

http://www.jb51.net/web/73987.html

这样就可以点击了啊,不要用display:none;

koobur
koobur
79
金拱门
金拱门
其实这是flash的坑。隐藏了,他就不会自动加载。
金拱门
金拱门
好方法!!
0
百岫嶙峋
百岫嶙峋
可以显示时给上传按钮重新绑定事件
金拱门
金拱门
重新绑定几乎等于重新写一个JS了。
0
yongzhong
yongzhong
用on绑定的不行吗
金拱门
金拱门
不知道怎样绑定。JS我很弱
0
aqpuppet
aqpuppet
是flash的吗?设置visibility:hidden;试试
金拱门
金拱门
目前来说,和flash无关。因为他的事件失效了。
0
aqpuppet
aqpuppet
你把display:none去掉就好了?
金拱门
金拱门
效果问题
0
yongzhong
yongzhong
$("selector1").on("click", "selector2", function () {})

selector1保持存在,selector2由jq创建,事件可自动绑定



金拱门
金拱门
不过,你这个和webuploader 无关? 因为我不设置display none,他就没问题。
0
aqpuppet
aqpuppet
flash在display为none后,重新显示会重新初始化实例
金拱门
金拱门
嗯。我强制用H5也不行。 太郁闷了。
0
b
bing086
也碰到这种情况,很郁闷 最后采用了这种方式
//$("#tab-third").removeClass("tab-pane").addClass('tab-pane1');
					 var uploadBtn='<div id="uploader-image" class="wu-example">'+
						    '<div id="fileList" class="uploader-list">'+
						    '</div>'+
						    '<div id="filePicker"><i class="fa fa-plus"></i> 选择图片</div>'+
						'</div>';
					$("#upload_btn").html(uploadBtn);
						
					 $.getScript(_basepath+"/static/js/plugins/webuploader/gallery_upload.js")
					  .done(function( script, textStatus ) {
					    console.log( textStatus );
					    //$("#uploader-image").show();
					   
					    
					  })
					  .fail(function( jqxhr, settings, exception ) {
					    $( "div.log" ).text( "Triggered ajaxError handler." );
					});




金拱门
金拱门
回复 @czpzn007 : 引起的问题是flash被隐藏了,然后按钮就会失效。有一个办法,先加载,然后用js做二次隐藏。
c
czpzn007
回复 @开源中国首席骨科主任 : 老大能不能分享一下你实际的代码,本事JS比较弱,刚好也遇到同样的问题。
金拱门
金拱门
感谢!我现在改了写法。先显示DIV层,让JS能够正常运行。然后在用JS隐藏一次。这样怎样显示和隐藏,他都能正常运作了。
0
c
czpzn007

引用来自“bing086”的评论

也碰到这种情况,很郁闷 最后采用了这种方式
//$("#tab-third").removeClass("tab-pane").addClass('tab-pane1');
					 var uploadBtn='<div id="uploader-image" class="wu-example">'+
						    '<div id="fileList" class="uploader-list">'+
						    '</div>'+
						    '<div id="filePicker"><i class="fa fa-plus"></i> 选择图片</div>'+
						'</div>';
					$("#upload_btn").html(uploadBtn);
						
					 $.getScript(_basepath+"/static/js/plugins/webuploader/gallery_upload.js")
					  .done(function( script, textStatus ) {
					    console.log( textStatus );
					    //$("#uploader-image").show();
					   
					    
					  })
					  .fail(function( jqxhr, settings, exception ) {
					    $( "div.log" ).text( "Triggered ajaxError handler." );
					});




回复 @开源中国首席骨科主任
$("#list_picture").show();
$("#del_btn").show();
$("#add_picture").hide();
我是这样,webuploader在add_picture层里,我点击按钮的时候才显示这个层,不过webuploader的upload.js里面实例化了对象,我本来想改一个动态实例化得,结果没有销毁函数,动态创建的也有问题。
金拱门
金拱门
动态创建好像是不行的,因为引入的flash失效了。
0
jwdstef
jwdstef

这个问题我也碰到了,最后找到了一个比较标准的方法,给div的class替换属性 

显示:$("#divname").removeAttr("class");

$("#divname").attr("class","webuploader-container");

隐藏:

$("#divname").removeAttr("class");

$("#divname").attr("class","webuploader-element-invisible");

返回顶部
顶部