表单仍然在 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

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

然后确保不要使用$.post 使用$.ajax：

和 this 在 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('');
            }
        });
    });
});