0

下の画像のような行を持つテーブルがあります。オンライン注文リンクをクリックすると、2 番目の画像のように行のすぐ下にフォームが表示されます。

最初の画像

ここに画像の説明を入力

2番目の画像

ここに画像の説明を入力

今私がやっていることは、送信ボタンがクリックされたときに ajax リクエストを開始することです。要求は最初のインスタンスで成功します。しかし、リクエストが再度発行されると、機能しません。それは同じように機能し<tr>ますが、2番目のオンライン注文<tr>がクリックされ、フォームがその下にロードされると<tr>、サブミット ajax は機能しません。

  $(document).ready(function(){
    var $form  = $('.form'),  $table = $('.table');
    $table.on('click', '.link', function(e) {
        e.preventDefault();
        $table.find('tr.temp-row').remove();
        $(this).closest('tr').after(function() {
            var $tr = $('<tr class="temp-row"><td colspan="4"></td></tr>');
            return $tr.find('td').html($form).end();
        });
    });

    $("#cancel").click(function(){
      $form.hide();
    });

    $("#submit").click(function(){

      var request = $.ajax({
        url: "processform.php",
        type: "POST",
        //data: {msg : msg},
        dataType: "html"
      });

      request.done(function(msg) {
        //$("#log").html( msg );
        alert(msg);
      });

      request.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
      });

      return false;
    })

  });

私のprocessform.phpページは、それを要求したページで警告されたテキストを返すだけです。

4

1 に答える 1

0

問題は、同じフォームに同じ送信を id で追加していることです#submit。したがって、同じ ID を持つ複数の送信ボタンが表示されます。

フォームに HTML を表示しませんが、送信の ID を使用する代わりに、クリック イベントに送信ボタンのクラスを使用する必要があります (例: $(".submitBtn").click...)。

補足として、後で問題が発生する可能性があるため、に変数を割り当てる前に、イベントハンドラーで変数を使用する必要cloneがあります。$form$table.on('click'...<td>

于 2013-02-19T20:53:51.787 に答える