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

       }
      });

此代码遵循上面的代码，当提交from #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代码。然后你创建一个动态创建的表单，jquery无法发布。而是删除$（'document'）。ready（）并放置一个函数，假设submit_form（）。在您表单的点击事件中调用此表单，您的表单将被提交。另一种方法是，在动态创建表单元素时，将它们全部分配给一个类。在使用此类提交表单循环以获取所有值并附加序列化表单以提交之前。

Answer 2

你的答案在于jquery的Live事件处理程序的深度。

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

我不记得这一切，但我认为它必须对点击事件处理程序做一些事情而不是绑定动态元素，但Live事件处理程序会这样做，所以尝试使用它。

更新

很抱歉，似乎在最新的jQuery中不推荐使用Live（）事件处理程序。

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

JQuery - 如何提交动态创建的表单？

2 个答案: