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;" />'); 

     } 
     }); 

此代碼如下上面的代碼中，我試圖使XHR請求一個PHP腳本時，從#mainform是提交。

$('#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的Live事件處理程序的深度。

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

我真的不記得那麼好，但我認爲它必須做與Click事件處理程序沒有約束力動態元素的東西，但實時事件處理程序，所以請嘗試使用。

UPDATE

對不起，它似乎是在Live（）事件處理程序已在最新的jQuery被棄用。

從jQuery 1.7開始，不推薦使用.live（）方法。使用.on（）連接到事件處理程序 。老版本jQuery的用戶應該優先使用 .delegate（），而不是.live（）。

另一種方法是使用jQuery的On（）事件處理函數。 http://api.jquery.com/on/

用法示例

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

Answer 2

您的問題是擺在首位的文檔加載，然後jQuery代碼被加載。然後你創建一個動態創建的表單，jQuery不會發布。相反，刪除$（'document'）。ready（）並放置一個函數let suppose submit_form（）。請在表單的點擊事件中調用此表單，並提交表單。另一種方法是，當你動態創建表單元素時，將它們全部分配給一個類。在通過該類提交表單循環以獲取所有值並將序列化表單附加到提交之前。