Question

我有动作首先需要通过ajax呈现表单，然后需要更新现有值。我已经使用正确的值获得渲染表单，但是当我点击通过ajax提交表单时我无法阻止表单提交，我有这个脚本：

 $('#edit-comment').click(function (e) {
    e.preventDefault();
    console.log(1);
});

但提交仍然工作！我做错了什么。而且我不知道如何在编辑操作中处理提交的表单。这是现有部分：

 /**
 * @Route("/edit/comment", name="chat_edit", options={"expose"=true})
 */
public function editAction(Request $request)
{
    $comment_id = json_decode($request->getContent(), true)['commentId'];
    $comment = $this->get('comment.repository')->find($comment_id);
    $form = $this->createForm(new CommentType(), $comment);

    return $this->render("ChatCommentBundle:Comment:form.html.twig",
        array('form' => $form->createView())
    );
}

链接到gist with form type

Answer 1

更新

原始答案（如下）仍然适用，但鉴于表单实际上是使用AJAX加载的，您无法在$(document).ready回调中绑定事件侦听器。最好的选择是使用事件委派。这是通过将事件侦听器附加到一开始就存在的DOM元素来完成的，但是该侦听器会接收可能稍后添加的元素的事件。例如：body元素将始终存在，因此您可以在那里监听表单提交，无论该表单是否存在无关紧要：

$('body').on('submit', '#form-id', function(e)
{
    console.log('#form-id was submitted, do AJAX => submission stopped');
    return false;
    //or
    e.preventDefault();
    e.stopPropagation();
});

here解释了为什么以及如何运作。归结为所有事件都通过目标节点的所有父DOM元素，因此您可以将侦听器附加到DOM中的任何位置，并在事件到达目标之前处理它们。我认为this old answer of mine也可以解释一件事或两件事。它不使用jQ，但它包含jQ在内部用于委派的代码的简化版本。

您正在阻止$('#edit-comment')上的点击事件的默认效果，但该事件仍会传播到表单。您也可以添加e.stopPropagation()。或者只是来自回调的return false;（这会阻止默认和停止传播）。

但是，阻止表单提交的更好方法是使用submit事件，并停止提交：

$('#form-id').on('submit', function(e)
{
    console.log('Do ajax call here');
    return false;
    //or
    e.preventDefault();
    e.stopPropagation();
});

在Symfony2中通过ajax提交表单

1 个答案: