jqueryからフォームを送信し、jquery

Question

の中にフォーム送信イベントをキャッチjqueryからフォーム送信を呼び出そうとしていますが、何らかの理由でフォームsubmit.Butをクリックした後にボタンを無効にしたいボタンのキャンセルや支払いが押された場合は、警告を受け取ってもらいたいです。しかし、警告を表示していません。お手伝いください。

$(document).ready(function() { 
    var table = $('#myTransactionitems').dataTable(); //Initialize the datatable 
    var user = $(this).attr('id'); 
    if(user != '') 
    { 
     $.ajax({ 
      url: 'transactions', 
      dataType: 'json', 
      cache:false, 
      success: function(s){ 
       console.log(s); 
       table.fnClearTable(); 
       for(var i = 0; i < s.length; i++) { 
        var disp1 = ''; 
        if (s[i][4] != 'Reserved') { 
         disp1 = 'display:none;' 
        } 
        table.fnAddData([ 
         "<form method='post' action='reservesplit'><input name = 'transactionID' type='hidden'\ 
        value='"+s[i][0]+"'></input><input type='submit' id = 'btn-bank' name='btn-bank' value = '"+s[i][0]+"' class='btn btn-link'>\ 
        </input></form>", 
         s[i][1], 
         s[i][2], 
         s[i][3], 
         s[i][4], 
         s[i][5], 
         "<form method='post'><input name = 'transactionID' type='hidden'\ 
        value='"+s[i][0]+"'><input name = 'donationID' type='hidden'\ 
        value='"+s[i][2]+"'><input name = 'splitAmount' type='hidden'\ 
        value='"+s[i][3]+"'></input></input><input type='submit' id = 'btn-paid' name='btn-paid' value = 'Paid' style='" + disp1 +"' class='btn btn-success btn-sm pull-left '>\ 
        </input></form><form method='post'><input name = 'transactionID' type='hidden'\ 
        value='"+s[i][0]+"'><input name = 'donationID' type='hidden' \ 
        value='"+s[i][2]+"'><input name = 'splitAmount' type='hidden'\ 
        value='"+s[i][3]+"'></input><input type='submit' id = 'btn-cancel' name='btn-cancel' value = 'Cancel' style='" + disp1 +"' class='btn btn-danger btn-sm pull-right'>\ 
        </input></form>" 
         ]);        
       } // End For 

      }, 
      error: function(e){ 
       console.log(e.responseText);  
      } 
     }); 
    } 

    $('form').submit(function(){ 
     alert("hello"); 
     $(this).find(':submit').attr('disabled','disabled'); 
     $(this).parent("form").submit(); 
    }); 
}); 

Answer 1

フォームを非同期のAJAXを使用して動的にDOMに追加しています。ハンドラをバインドするために$('form').submit()を呼び出すと、フォームはまだDOMにありません。 success:関数でフォームを追加した後に呼び出す必要があります。

また、$(this).parent("form").submit()はちょうど$(this).submit()である必要があります。 $(this)がフォームの場合、その親に行く必要はありません。また、通常のフォーム送信が行われないようにするには、event.preventDefault()を使用してください。

$(document).ready(function() { 
    var table = $('#myTransactionitems').dataTable(); //Initialize the datatable 
    var user = $(this).attr('id'); 
    if(user != '') 
    { 
     $.ajax({ 
      url: 'transactions', 
      dataType: 'json', 
      cache:false, 
      success: function(s){ 
       console.log(s); 
       table.fnClearTable(); 
       for(var i = 0; i < s.length; i++) { 
        var disp1 = ''; 
        if (s[i][4] != 'Reserved') { 
         disp1 = 'display:none;' 
        } 
        table.fnAddData([ 
         "<form method='post' action='reservesplit'><input name = 'transactionID' type='hidden'\ 
        value='"+s[i][0]+"'></input><input type='submit' id = 'btn-bank' name='btn-bank' value = '"+s[i][0]+"' class='btn btn-link'>\ 
        </input></form>", 
         s[i][1], 
         s[i][2], 
         s[i][3], 
         s[i][4], 
         s[i][5], 
         "<form method='post'><input name = 'transactionID' type='hidden'\ 
        value='"+s[i][0]+"'><input name = 'donationID' type='hidden'\ 
        value='"+s[i][2]+"'><input name = 'splitAmount' type='hidden'\ 
        value='"+s[i][3]+"'></input></input><input type='submit' id = 'btn-paid' name='btn-paid' value = 'Paid' style='" + disp1 +"' class='btn btn-success btn-sm pull-left '>\ 
        </input></form><form method='post'><input name = 'transactionID' type='hidden'\ 
        value='"+s[i][0]+"'><input name = 'donationID' type='hidden' \ 
        value='"+s[i][2]+"'><input name = 'splitAmount' type='hidden'\ 
        value='"+s[i][3]+"'></input><input type='submit' id = 'btn-cancel' name='btn-cancel' value = 'Cancel' style='" + disp1 +"' class='btn btn-danger btn-sm pull-right'>\ 
        </input></form>" 
         ]);        
       } // End For 

       $('form').submit(function(e){ 
        alert("hello"); 
        e.preventDefault(); 
        $(this).find(':submit').attr('disabled','disabled'); 
        $(this).submit(); 
       }); 
      }, 
      error: function(e){ 
       console.log(e.responseText);  
      } 
     }); 
    } 
}); 

やエラーのためのあなたのJavaScriptコンソールをチェックEvent binding on dynamically created elements?