无法阻止提交ajax加载的表单(Cannot prevent an ajax loaded form from submiting)

无法阻止提交ajax加载的表单(Cannot prevent an ajax loaded form from submiting)

我有一个网页，用户可以通过点击链接在页面上加载表单。 我使用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(); }); });

因此，它会检查主内容中是否存在先前加载的表格，然后将其删除并将该表格与类“main-content”加载到同一个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>

I have a web page where a user can load a form on the page by hitting a link on it. I use ajax for the loading procedure. All this is happening in a seperate main file.

The form load code

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

So it checkes if there is a previous loaded table in the main-content and then it removes it and loads the form in the same div with class "main-content". After this outside the click function I "catch" the submit event for the form

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

(I have placed preventDefault() both at the top of submit and at the bottom as it is right now still the same)

The submit code is after the click function but inside the document.ready. But it won't work the form is submitted. I am betting it has to do that when the page loads(document.ready) it doesn't see the form (its not there it is loaded after a user clicks on a link) so it doesn't chatch the submit event on the form correct? Should I place the submit function inside the "load" callback function?

sample html code

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

and the form

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

最满意答案

尝试这个：

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

try this:

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