3

提交动态创建的表单时遇到问题。

这就是我在选中单选按钮后创建表单的方式：

$(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，我已经尝试过，但它仍然不起作用。

有人可以帮我吗？

4

2 回答 2

1

您的问题是，首先加载您的文档，然后加载 jquery 代码。然后你创建一个动态创建的表单，jquery 不会发布。而是删除 $('document').ready() 并放置一个函数让我们假设 submit_form()。在您的表单的点击事件上调用此表单，您的表单将被提交。另一种方法是在动态创建表单元素时为它们分配一个类。在提交表单之前，使用此类循环以获取所有值并附加序列化表单以提交。

于 2012-04-10T09:12:56.580 回答
0

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

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

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

更新

抱歉，似乎 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());
});
于 2012-04-10T07:49:00.587 回答