2

我有一个 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>
4

2 回答 2

1

您可能在表单出现在您的页面之前绑定了提交事件处理程序。例如，使用事件委托而不是直接绑定

$(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
于 2013-07-26T04:09:19.710 回答
0

问题似乎来自于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;
        });
});

演示：问题
演示：解决方案

于 2013-07-26T04:10:22.570 回答