JQuery - 동적으로 생성 된 양식을 제출하는 방법?

Question

동적으로 생성 된 양식을 제출할 때 문제가 있습니다.

이

$(document).ready(function(){ 

    $('input[name$="rad-tweet"]').click(function(){ 

     var radio_value = $(this).val(); 

     if(radio_value==='hash') { 
     $('#mainform2').empty(); 
      $('#mainform2').remove(); 
     $('#radio-buttons').after('<form action="" id="mainform" method="POST" ></form>'); 
     $('#mainform').append('<label class="label" for="Location" >&nbsp;&nbsp;Location</label>'+ 
       '<input class ="text-box" type="text" name="Location" id="Location"/>'+ 
       '<label class="label" for="Since" >Since</label>'+ 
       '<input class ="text-box" type="text" name="Since" id="Since" />'+ 

       '<select name="Time" id="Time" style="width:80px;">'+ 
        '<option value="MINUTE">Minute(s)</option>'+ 
        '<option value="HOUR">Hour(s)</option>'+ 
        '<option value="DAY">Day(s)</option>'+ 
        '<option value="WEEK">Week</option>'+ 
       '</select>'+ 
       '<label class="label" for="Time" >Ago&nbsp;</label>'+ 
       '<label class="label" for="Limit" >Up to</label>'+ 

       '<input class ="text-box" type="text" name="Limit" id="Limit" />'+ 
       '<label class="label" for="Limit" >Results&nbsp;</label>'+ 
       '<input class ="submit-button" type="submit" id="submitButton" value="Get Hashtags" style="width:95px;" />'); 




     } 
     else if(radio_value==='trends') { 
      $('#mainform').empty(); 
      $('#mainform').remove(); 
      $('#radio-buttons').after('<form action="" id="mainform2" method="POST" ></div>'); 
      $('#mainform2').append('<label class="label" for="Location" >&nbsp;&nbsp;Location&nbsp;</label>'+ 
       '<input class ="text-box" type="text" name="Location" id="Location"/>&nbsp;&nbsp;'+ 
       '<input class ="submit-button" type="submit" id="submitButton" value="Get Trends" style="width:95px;" />'); 

     } 
     }); 

이 코드는 위의 코드를 다음, 나는 #mainform에서이 때 PHP 스크립트에 XHR 요청을하려고 :

이

은 라디오 버튼이 선택되어 이후 나는 양식을 작성하는 방법이다 제출.

$('#mainform').submit(function(){ 

      if(runProgram()){ 
       //Loading div. To be hidden upon sucessful ajax. Disable submit button 
       document.getElementById("Loading").style.visibility="visible"; 
       document.getElementById("submitButton").disabled=true; 


       $.ajax({ 
        url: "indexProgram.php", 
        type: 'POST', 
        data: $(this).serialize(), 

        success:function(data, textStatus, jqXHR){ 
         //take away loading div and reenable submit. 
         document.getElementById("Loading").style.visibility="hidden"; 
         document.getElementById("submitButton").disabled=false; 


         var arr = data.split(",-,"); 

         BeginTime = arr[3]; 

         if(!(/^\s*$/).test(arr[0])) { 


         var lookAt = ge.createLookAt(''); 


         data_array = arr[4].split("|"); 
         alert(data); 

         // Set the position values. 
         lookAt.setLatitude(parseFloat(arr[0])); 
         lookAt.setLongitude(parseFloat(arr[1])); 
         //lookAt.setLatitude(43.653226); 
         //lookAt.setLongitude(-79.3831843); 
         lookAt.setTilt(50.0); 
         lookAt.setRange(9000.0); //default is 0.0 

         // Update the view in Google Earth. 
         ge.getView().setAbstractView(lookAt); 
         } 
         else{ 

         alert("Location does not exist. Please try again with an existing Location") 

         } 



        }, 
        complete : function(){ 

         modDom(data_array); 

        } 
       }); 


      } 


      //doesn't refresh pag 
      return false; 
     }); 



     }); 

이전에는 양식이 정적 인 경우 ajax xhr 호출이 성공적으로 완료되었지만 지금은 그렇지 않습니다. 문제가 무엇인지, 그리고 DOM에 양식이없고 .live를 사용하는 방법에 대해 읽고 있었지만 시도했지만 여전히 작동하지 않습니다.

누군가 나를 도와주세요.

Answer 1

귀하의 답변은 jquery의 실시간 이벤트 처리기의 깊이에 있습니다.

http://docs.jquery.com/Events/live

정말 잘 모든 것을 기억하지 않는,하지만 난 그 당함 클릭 이벤트 처리기는 동적 요소를 결합하지 뭔가를 할 생각하지만, 라이브 이벤트 처리기를 않습니다, 그래서를 사용해보십시오.

UPDATE

죄송합니다, 그 라이브() 이벤트 핸들러는 최신 jQuery를에 사용되지 않습니다 것으로 보인다.

jQuery 1.7부터 .live() 메소드는 더 이상 사용되지 않습니다. .on()을 사용하여 이벤트 핸들러를 연결하십시오. 이전 버전의 jQuery 사용자는 .live()보다 우선하여 .delegate()를 사용해야합니다.

대체 방법은 jquery On() 이벤트 처리기를 사용하는 것입니다. http://api.jquery.com/on/

사용 예제

$("#dataTable tbody tr").on("click", function(event){ 
    alert($(this).text()); 
}); 

Answer 2

귀하의 문제는 처음에 문서로드 후 jQuery 코드가로드 된 것입니다. 그런 다음 jquery가 게시하지 않는 동적으로 생성 된 양식을 만듭니다. 대신 $ ('document'). ready()를 제거하고 submit_form()을 가정하는 함수를 넣으십시오. 양식의 클릭 이벤트에서이 양식을 호출하면 양식이 제출됩니다. 또 다른 접근법은 동적으로 폼 요소를 생성 할 때 모든 클래스를 할당하는 것입니다. 이 클래스를 사용하여 양식 루프를 제출하기 전에 모든 값을 가져온 다음 serialize 양식과 함께 제출하여 제출하십시오.