problème avec la capture envoi du formulaire jQuery lors de l'utilisation « display: none »

Question

Je suis en train d'utiliser jQupload pour télécharger une image de manière asynchrone. Le script utilise un iframe hors de la page pour télécharger, puis attrape l'événement .load() de l'iframe pour retourner le message JSON qui est retourné.

Si j'afficher le formulaire en bas d'une page HTML standard et le javascript inclus puis il fonctionne très bien. Cependant, je voudrais charger le formulaire de téléchargement dans une fenêtre modale et j'utilise la facebox pour cela. Le formulaire est donc inclus avec la balise de style définie sur "display: none" au bas de la page et il s'affiche dans la fenêtre modale lorsqu'un clic est effectué sur un bouton spécifique.

Dans la fenêtre modale, la forme de soumettre sans problème et l'iframe est peuplée, mais le code d'événement de soumettre le formulaire ne pas être pris par le javascript. J'ai essayé d'alerter une simple chaîne dans la fonction mais je n'obtiens aucun résultat. Cependant, si je alerte une chaîne en utilisant la balise "onsubmit" du formulaire, cela fonctionne bien.

La ligne de code suivante exécute ok et ajoute une cible attr à la forme:

$(this).attr("target",data.iframe); 

Ceci est la ligne suivante de code qui ne se déclenche pas dans la fenêtre modale:

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

Ce code provient des fonctions jQupload qui sont appelées en utilisant les 2 lignes suivantes:

$("#image_upload_form").jqupload(); 
$("#image_upload_form").jqupload_form(); 

C'est tout le code jQupload et est utilisé comme décrit à 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 
     }) 
    } 
}); 

Toutes les idées?

Answer 1

Matt, je crois que le problème est le sélecteur que vous utilisez ne fait quoi que ce soit gréement jusqu'à la forme:

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

ne fonctionne que dans un certain contexte, il devrait être que cela fonctionne partout:

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