"display : none"을 사용할 때 jQuery로 양식 제출 문제가 발생했습니다.

Question

jQupload를 사용하여 이미지를 비동기 적으로 업로드하려고합니다. 스크립트는 페이지의 iframe을 사용하여 업로드 한 다음 iframe의 .load() 이벤트를 포착하여 반환되는 JSON 메시지를 반환합니다.

표준 HTML 페이지 하단에 양식을 표시하고 javascript를 포함하면 정상적으로 작동합니다. 그러나, 나는 모달 창으로 업로드 양식을로드하고 싶습니다 그리고 나는 이것을 위해 페이스 박스를 사용하고 있습니다. 따라서 양식은 페이지 아래쪽에 "display : none"으로 설정된 스타일 태그와 함께 포함되며 특정 단추를 클릭 할 때 모달 창에 표시됩니다.

모달 창 내에서 양식 제출이 문제없이 수행되고 iframe이 채워지지만 양식의 제출 이벤트 코드는 자바 스크립트에 의해 포착되지 않습니다. 함수에서 간단한 문자열에 경고를 시도했지만 결과가 없습니다. 그러나 양식의 "onsubmit"태그를 사용하여 문자열을 경고하면 괜찮습니다.

다음의 코드는 확인을 실행하고 폼에 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() {... 

만 특정 상황에서 작동, 그것은이 모든 곳에서 작업을해야한다 :

Answer 1

매트, 나는 문제가 실제로 폼에 아무것도 변통하지 사용하고있는 선택이라고 생각

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