forms - 表单仍然在 preventDefault 上提交

Question

我正在使用 jQuery 将表单数据提交到表单操作中的文件。但是，当我提交表单时，浏览器会重定向到操作 (comment.php)。我不知道为什么这是因为e.preventDefault()应该停止浏览器的重定向。理想情况下，我希望浏览器不重定向并保留在当前页面（index.php）上。

jQuery：

<script type='text/javascript'>
    $('document').ready(function(){
        $('.commentContainer').load('../writecomment.php');
        $('.answerContainer').on('submit', 'form', function(e){
            e.preventDefault();
            var form = $(this).closest('form');
            $.post($(form).attr('action'), 
            $(form).serialize(), 
            function() {
                $('.commentContainer').load('../writecomment.php');
                $('.commentBox').val('');
            }
        });
    });
</script>

HTML 表单：

<form method='POST' action='../comment.php'>
    //form contents
</form>

Answer 1

我认为您的selectorandon方法无法正常工作。尝试：$('form').on('submit', function(e) {你确定你已经将你的表单包装在一个带有类的元素中answerContainer吗？

然后只是为了确保不要使用$.postuse $.ajax：

this在一个 on i 元素内，例如。form不是第一个选择器.answerContainer。

$('document').ready(function(){

    $('.commentContainer').load('../writecomment.php');

    $('.answerContainer').on('submit', 'form', function(event) {
        event.preventDefault();
        var $form = $(this);
        $.ajax({
            "url": $form.attr("action"),
            "data": $form.serialize(),
            "type": $form.attr("method"),
            "response": function() {
                $('.commentContainer').load('../writecomment.php');
                $('.commentBox').val('');
            }
        });
    });
});