title: JQuery - How to submit dynamically created form?
body: <p>I am having trouble when submitting a dynamically created form.</p>
  
  <p>This is how I create the form after a radio button is checked:</p>
  
  <pre><code>$(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('&lt;form  action="" id="mainform" method="POST" &gt;&lt;/form&gt;');
           $('#mainform').append('&lt;label class="label" for="Location" &gt;&amp;nbsp;&amp;nbsp;Location&lt;/label&gt;'+
                  '&lt;input class ="text-box" type="text" name="Location" id="Location"/&gt;'+
                  '&lt;label class="label" for="Since" &gt;Since&lt;/label&gt;'+
                  '&lt;input  class ="text-box" type="text" name="Since" id="Since" /&gt;'+
  
                  '&lt;select name="Time" id="Time" style="width:80px;"&gt;'+
                      '&lt;option value="MINUTE"&gt;Minute(s)&lt;/option&gt;'+
                      '&lt;option value="HOUR"&gt;Hour(s)&lt;/option&gt;'+
                      '&lt;option value="DAY"&gt;Day(s)&lt;/option&gt;'+
                      '&lt;option value="WEEK"&gt;Week&lt;/option&gt;'+
                  '&lt;/select&gt;'+
                  '&lt;label class="label" for="Time" &gt;Ago&amp;nbsp;&lt;/label&gt;'+
                   '&lt;label class="label" for="Limit" &gt;Up to&lt;/label&gt;'+
  
                  '&lt;input class ="text-box" type="text" name="Limit" id="Limit" /&gt;'+
                 '&lt;label class="label" for="Limit" &gt;Results&amp;nbsp;&lt;/label&gt;'+
                  '&lt;input class ="submit-button" type="submit" id="submitButton" value="Get Hashtags" style="width:95px;" /&gt;');
  
  
  
  
        }
        else if(radio_value==='trends') {
            $('#mainform').empty();
             $('#mainform').remove();
            $('#radio-buttons').after('&lt;form  action="" id="mainform2" method="POST" &gt;&lt;/div&gt;');
            $('#mainform2').append('&lt;label class="label" for="Location" &gt;&amp;nbsp;&amp;nbsp;Location&amp;nbsp;&lt;/label&gt;'+
                  '&lt;input class ="text-box" type="text" name="Location" id="Location"/&gt;&amp;nbsp;&amp;nbsp;'+
                  '&lt;input class ="submit-button" type="submit" id="submitButton" value="Get Trends" style="width:95px;" /&gt;');
  
         }
        });
  </code></pre>
  
  <p>This code follows the code above, and I try to make an XHR request to a php script when the from #mainform is submitted.</p>
  
  <pre><code>$('#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;
          });
  
  
  
        });
  </code></pre>
  
  <p>Before, when the form was static, the ajax xhr call completed successfully, now it doesn't.
  I have been reading about what the issue might be, and about how the form is not in the DOM, and to use .live, and I have tried, but it still does not work.</p>
  
  <p>Could somebody please help me out?</p>