Question

我有一个php代码，它回应了一个由另一个jquery代码插入到我的html中的表单。一切正常。我正在尝试使用ajax提交此表单。

echo '<form id="comment_form" action="commentvalidation.php?PhotoID='.$_GET['PhotoID'].'" method="POST">';
echo '<label>Comment: </label>';
echo '<textarea id="description" name="CommentDesc" cols="25" rows="2"></textarea>';
echo '<input class="button" id="comment_btn" type="submit" name="Comment" value="Comment" >';
echo '</form>';

传统上提交表格时效果很好。问题是我无法通过ajax提交它。 .submit只是不会阻止默认操作。

<script>
$(function(){

        $('#comment_form').submit(function() {
          alert("we are in");

                    $.post($('#comment_form').attr('action'), $('#comment_form').serialize(), function(data){
                        $('#comment_form').html("<div id='message'></div>");
                    });
            //Important. Stop the normal POST
            return false;
        });
});

</script>

Answer 1

您可能在表单位于页面之前绑定了 submit 事件处理程序。使用事件委派而不是直接绑定，例如

$(document.body).on('submit', '#comment_form', function(e) {
    e.preventDefault();
    alert('We are in');

    // and the rest, no need for return false
});

作为附录，尽量不要用PHP回应大量的HTML。它更具可读性，如果你只是在需要时切换到PHP上下文，你就不太可能遇到引号和连接问题，例如

// break out of the PHP context
?>
<form id="comment_form" action="commentvalidation.php?PhotoID=<?= htmlspecialchars($_GET['PhotoID']) ?>" method="POST">
<label>Comment: </label>
<textarea id="description" name="CommentDesc" cols="25" rows="2"></textarea>
<input class="button" id="comment_btn" type="submit" name="Comment" value="Comment" >
</form>
<?php
// and back to PHP

Answer 2

问题似乎来自form that was inserted into my html by another jquery code。根据我的理解，表单是在页面加载后动态创建的。

在这种情况下，当submit处理程序注册代码被执行时，元素在dom结构中不存在 - 意味着处理程序从未注册到表单。

尝试使用委托事件处理程序来解决此问题

$(function(){

        $(document).on('submit', '#comment_form', function() {
          alert("we are in");

                    $.post($('#comment_form').attr('action'), $('#comment_form').serialize(), function(data){
                        $('#comment_form').html("<div id='message'></div>");
                    });
            //Important. Stop the normal POST
            return false;
        });
});

演示：Problem
演示：Solution

Jquery .submit不会拦截表单提交

2 个答案: