Проблема с приемом формы с помощью jQuery при использовании «display: none»

Question

Я пытаюсь использовать jQupload для загрузки изображения асинхронно. Сценарий использует iframe на странице для загрузки, а затем захватывает событие .load() iframe, чтобы вернуть сообщение JSON, которое возвращается.

Если я отображаю форму внизу стандартной HTML-страницы и включаю javascript, тогда она отлично работает. Однако я хотел бы загрузить форму загрузки в модальное окно, и для этого я использую facebox. Поэтому форма включается с тегом стиля, установленным в «display: none» внизу страницы, и отображается в модальном окне при нажатии на определенную кнопку.

В модальном окне заполняется форма submit без проблем, а iframe заполняется, однако код, передаваемый в форму, не попадает в javascript. Я попытался оповестить простую строку в функции, но я не получил результата. Однако, если я выхожу из строки с использованием тега onsubmit формы, он работает нормально.

Следующая строка кода выполняется нормально, и добавляет цель атр в виде:

$(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 
     }) 
    } 
}); 

Есть идеи?

Answer 1

Мэтт, я считаю, что проблема является селектор вы используете на самом деле не такелаж ничего до формы:

$(this).submit(function() {... 

работает только в определенном контексте, оно должно быть, чтобы это работало везде:

$("#myFormId").submit(function() {....