event.preventDefault() 不适用于 AJAX

Question

我今天在使用 AJAX 表单时遇到了一些问题。我已经尝试了很多东西，但无法让它发挥作用。

我的 jQuery 应该阻止表单提交。它必须通过AJAX。然而，它似乎忽略了 event.preventDefault();并提交表单。

表单是“单页”的一部分。单页是通过 AJAX 加载的页面。该表单是一个标准的带有POST方法的表单。

问题： 为什么 event.preventDefault() 不起作用，我该如何解决这个问题？

表格：

<form id="comment-form" action="commentsystem.php" method="post">
<input type="text" placeholder="Write a comment..." name="commentTxt" />
<input type="hidden" value="'.$row['id'].'" name="postID" />
<div class="submit-btn">
    <img src="assets/images/checkmark.svg" />
    <input type="submit" value="" />
</div>

jquery：

$('#comment-form').on('submit', function (event) {
    // Stop the browser from submitting the form.
    event.preventDefault();

    // Serialize the form data.
    var formData = $('#comment-form').serialize();

    $.ajax({
        type: 'post',
        url: $(form).attr('action'),
        data: formData,
        success: function (response) {
            $('.comment-container').append(response);
        }
    });
});

评论系统.php：

$sql = "INSERT INTO comments (postID, userID, comment) VALUES ('$_POST[postID]', '$_SESSION[id]', '$_POST[commentTxt]')";

if ($conn->query($sql)===TRUE){
    echo '<p><span class="username">'.$_SESSION[id].'</span>'.$_POST[commentTxt].'</p>';
} else{
    echo 'Something went wrong while sending your comment.';
}

Answer 1

聚会迟到了！我最近遇到了这个问题，希望这对其他人有帮助。我不确定为什么会发生这种情况，但在我的本地主机上，以下工作正常，但在生产中 preventDefault 不起作用。

$(document).ready(function() {
    $(document).on('submit', ".edit-form", function(event) {
        event.preventDefault(); // Stop form from submitting normally
        var url = $(this).attr("action"); // where to post to
        // more code
        return false; // added for good measure(might not need)
    });
});

显然 .on() 不喜欢在 $(document).ready() 中，并且从一些阅读中它不需要。如果您像我一样使用它，那就太好了，因为我正在替换也需要它的表单。

所以您需要做的就是删除 $(document).ready(){};看看它是否像这样工作。

$(document).on('submit', ".edit-form", function(event) {
    event.preventDefault(); // Stop form from submitting normally
    var url = $(this).attr("action"); // where to post to
    // more code
    return false; // added for good measure(might not need)
});

正如我所说，我不确定为什么会这样，我已经很久没有使用 jQuery 了，我只知道它在我的 localhost preventDefault 上按预期工作，而在生产中它忽略了它。 如果有人能指出正确的方向，为什么它会在本地而不是生产环境中工作？将不胜感激。 也许托管公司的 PHP 设置？ （没有任何线索，此时抓住稻草）

Answer 2

我自己想通了。我发布我自己的答案是因为它可能对其他人有所帮助。

我变了：

$('#comment-form').on('submit', function (event) {

到：

$(document).on("click",".comment-submit", function(event) {

请注意，我在表单中的提交按钮中添加了一个类。 我不知道为什么这是有效的，但它确实有效。如果有人能解释一下，将不胜感激。