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

因此，检查主内容中是否存在先前加载的表，然后将其删除并将表单加载到具有“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（）放在提交的顶部和底部，因为它现在仍然是相同的）

提交代码在click函数之后但在document.ready中。但是提交表单不起作用。我打赌它必须这样做，当页面加载（document.ready）它没有看到表单（它不是它在用户点击链接后加载）所以它不会聊天提交事件形式正确吗？我应该将提交函数放在“load”回调函数中吗？

示例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
});

它应该有效，表单不必在页面加载时出现在页面上。

无法阻止ajax加载表单提交

2 个答案: