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（）と仮定する関数を配置します。フォームのクリックイベントでこのフォームを呼び出すと、フォームが送信されます。もう1つのアプローチは、フォーム要素を動的に作成するときに、それらすべてにすべてのクラスを割り当てることです。フォームを送信する前に、このクラスでループしてすべての値を取得し、送信するシリアル化フォームを追加します。

于 2012-04-10T09:12:56.580 に答える
0

あなたの答えは、jquery のライブ イベント ハンドラーの深さにあります。

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

あまりよく覚えていませんが、動的要素をバインドしないクリックイベントハンドラーで何かをする必要があると思いますが、ライブイベントハンドラーがそれを行うので、それを使用してみてください。

アップデート

申し訳ありませんが、Live() イベント ハンドラーは最新の 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());
});
于 2012-04-10T07:49:00.587 に答える