無法阻止提交ajax加載的表單

Question

我有一個網頁，用戶可以通過點擊鏈接在頁面上加載表單。我使用ajax進行加載過程。所有這些都發生在一個單獨的主文件中。

的形式加載代碼

$(document).ready(function(){ 
     $(".evaluation").click(function(event){ 
     event.preventDefault(); 
     var division = $("select#tmimata").prop("value"); 
     var action = $(".lesson select").prop("value"); 
     var table = $(".main-content table"); 
     if (table.length > 0){ 
      table.fadeOut(); 
     } 
     $(".main-content").load('/evaluation/employee/'+employee_id+"/?division="+tmima+"&action="+action, function(){ 
      alert("successfully retrieved evaluation form"); 
     }).show(); 
    }); 
}); 

所以checkes如果在主內容以前裝表，然後將其刪除，並以一流的「主要內容」將裝載的形式在同一div 。這個點擊功能之外後，我「抓住」的形式

$(".evaluation_form").submit(function (event){ 
    console.log('inside form submit'); 
    var form = $(this); 
    var tmima_id = $('select#divisions').prop('value'); 
    var action_id = (".action select").prop('value'); 
    data = form.serialize(); 
    //ajax call to post the data 
    event.preventDefault(); 
}); 

提交事件（我已經把preventDefault（）方法無論是在提交的頂部和底部，因爲它是現在還是一樣）

提交代碼是在點擊功能之後，但在document.ready中。但表單提交後無法使用。我打賭它必須這樣做，當頁面加載（document.ready）時，它看不到表單（它不是在用戶點擊鏈接後加載的），因此它不會在形式正確嗎？我應該將提交函數放在「加載」回調函數中嗎？

的HTML代碼示例

<!---somewhere in the html file --> 
<a href="#" class="evaluation">Evaluate employee</a> 
<div class="main-content"></div> 

和形式

<form class="evaluaton_form" action="" method="post"> 
    <!--form fields here --> 
    <input type="submit" name="submit" value="Save evaluation" > 
</form> 

Answer 1

試試這個：

$(document).on('submit', '.evaluation_form', function(event) { 
    console.log('inside form submit'); 
    var form = $(this); 
    var tmima_id = $('select#divisions').prop('value'); 
    var action_id = (".action select").prop('value'); 
    data = form.serialize(); 
    //ajax call to post the data 
    event.preventDefault(); 
}); 

Answer 2

如果你使用：

$(document).on("submit", ".evaluation_form", function (event){ 
    console.log('inside form submit'); 
    event.preventDefault(); 
    var form = $(this); 
    var tmima_id = $('select#divisions').prop('value'); 
    var action_id = (".action select").prop('value'); 
    data = form.serialize(); 
    //ajax call to post the data 
}); 

它應該可以工作，表單在頁面加載時不必在頁面上。