从jquery提交表单并捕获表单内提交的事件jquery

Question

我想调用表单提交从jquery，我想禁用按钮后，我单击表单submit.But由于某种原因，它甚至不是调用alert.If按钮取消或付款被按下我想获得警报hello.But它不叫alert.Please帮助。

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

或者你可以使用事件委托，为Event binding on dynamically created elements?