[英]Problem catching form submit with jQuery when using “display:none”
我正在尝试使用jQupload异步上传图像。 该脚本使用页面外的iframe进行上传,然后捕获iframe的.load()事件以返回返回的JSON消息。
如果我在标准HTML页面的底部显示表单,并包含javascript,则可以正常工作。 但是,我想将上传表单加载到模式窗口中,并且为此使用了Facebox。 因此,该表单包含在页面底部,样式标签设置为“ display:none”,并且在单击特定按钮时显示在模式窗口中。
在模式窗口中,表单提交没有问题,并且填充了iframe,但是JavaScript并未捕获表单提交事件的代码。 我曾尝试在函数中提醒一个简单的字符串,但没有任何结果。 但是,如果我使用表单的“ onsubmit”标记来警告字符串,则它可以正常工作。
下面的代码行执行ok,并将目标attr添加到表单中:
$(this).attr("target",data.iframe);
这是不在模态窗口内触发的下一行代码:
$(this).submit(function(){
alert('hello!');
$("#"+data.iframe).load(function(){
var data1=$("#"+data.iframe).contents().find("body").html();
data1='{"formid":{"value":"'+id+'"},'+data1.substr(1);
if($.jQupload.callback[id]){
eval($.jQupload.callback[id]+"('"+data1+"')")
}
else{
if($.jQupload.output[id]){
$.jQupload.jsonMessage(data1)
}
else{
$.jQupload.defaultMessage(data1)
}
}
$("#"+data.iframe).contents().find("body").html("");
$("#"+data.iframe).unbind("load")
})
});
这段代码来自jQupload函数内部,使用以下两行调用这些函数:
$("#image_upload_form").jqupload();
$("#image_upload_form").jqupload_form();
这是完整的jQupload代码,其使用如http://jqframework.com/jqupload_doc.html所述 :
/* jQupload - jQuery Upload v0.1
* jQupload is distributed under the terms of the MIT license
* For more information visit http://jqframework.com/jqupload
* Copyright (C) 2010 jqframework.com
* Do not remove this copyright message
*/
$.jQupload = {
fadeOutTime:3000,
callback:{},
output:{},
init: function(id,obj){
if(obj.callback){
$.jQupload.callback[id]=obj.callback
}
if(obj.output){
$.jQupload.output[id]=obj.output
}
if(obj.fadeOutTime){
$.jQupload.fadeOutTime=obj.fadeOutTime
}
},
defaultMessage:function(data){
alert(data)
},
jsonMessage:function(data){
eval("data="+data);
$("#"+$.jQupload.output[data.formid.value]).html(data.message).fadeOut($.jQupload.fadeOutTime)
}
};
$.fn.extend({
jqupload:function(obj){
return this.each(function(){
var id=this.id;
if(typeof this.id=="object"){
id=$(this).attr("id")
}
if(!obj)
obj={};
$.jQupload.init(id,obj)
})
},
jqupload_form:function(){
return this.each(function(){
var id=this.id;
if(typeof this.id=="object"){
id=$(this).attr("id")
}
var data=$.extend(
{},
{iframe:id+"_iframe"},
data
);
$("body").append("<iframe name="+data.iframe+' id="'+data.iframe+'"></iframe>');
//$("#"+data.iframe).css({position:"absolute",left:"-1000px",top:"-1000px",width:"0px",height:"0px"});
$("#"+data.iframe).css({position:"absolute",left:"0px",top:"0px",width:"500px",height:"500px"});
$(this).attr("target",data.iframe);
$(this).submit(function(){
$("#"+data.iframe).load(function(){
var data1=$("#"+data.iframe).contents().find("body").html();
data1='{"formid":{"value":"'+id+'"},'+data1.substr(1);
if($.jQupload.callback[id]){
eval($.jQupload.callback[id]+"('"+data1+"')")
}
else{
if($.jQupload.output[id]){
}
$.jQupload.jsonMessage(data1)
else{
$.jQupload.defaultMessage(data1)
}
}
$("#"+data.iframe).contents().find("body").html("");
$("#"+data.iframe).unbind("load")
})
});
return true
})
}
});
有任何想法吗?
马特,我相信问题在于您使用的选择器并未实际将任何内容绑定到表单:
$(this).submit(function() {...
仅在特定上下文中有效,应该在任何地方都可以起作用:
$("#myFormId").submit(function() {....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.