Javascript event.preventdefault在提交表单时不起作用

我想在不重新加载页面的情况下将数据提交到php页面。我有一些代码，但它似乎工作不正常-它将我发送到操作中指定的页面

JSfiddle：

HTML:

Javascript/Jquery：

<script type='text/javascript'>
/* attach a submit handler to the form */
$("#contactForm").submit(function (e) {

  /* stop form from submitting normally */
  e.preventDefault();
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $( this ),
      url = $form.attr( 'action' );

  /* Send the data using post */
  var posting = $.post( url, { name: $('#name').val(), email: $('#email').val(), msg: $('#message').val() } );

  /* Alerts the results */
  posting.done(function( data ) {
    alert('success');
  });
});
</script>

---

编辑：在控制台中，$contactForm.submitfunctionevent{表示未捕获引用错误

您没有使用表单id。请改用表单id

<div id="form">
    <form action="form.php" id="contactForm" method="post">
        <span>Name</span>
        <input type="text" name="name" id="name" class="name" placeholder="Enter your name" tabindex=1 />
        <span>Email</span>
        <input type="text" name="email" id="email" class="email" placeholder="Enter your email" tabindex=2 />
        <span>Message</span>
        <textarea class="message" id="message" placeholder="Enter your message" tabindex=3></textarea>
        <input type="submit" name="submit" id="submit" value="Send e-mail" class="submit" tabindex=4>
    </form>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$("#contactForm").submit(function (e) {
    e.preventDefault();
    var $form = $( this ),
        url = $form.attr( 'action' );
    var posting = $.post( url, { name: $('#name').val(), email: $('#email').val(), msg: $('#message').val() } );
    posting.done(function( data ) {
        alert('success');
    });
});
</script>

请尝试以下操作：

$("#contactForm").submit(function (e) {
   // Your code
   return false;
});

---

关于preventDefault和return false之间的区别，有一些很好的答案。

表单只是一个div。使用$'form'或class或id表示表单而不是div。应该是$contactForm或$form表示实际表单，而不是表单周围的div。因为您无法提交div。为什么编辑OP只是为了进一步破坏代码她？现在不是附加。提交到一个div，而是将它附加到一个根本不存在的id上。它工作正常：~它被破坏了，因为你的JSFIDLE没有正确构造……你没有包括jQuery，你不应该在JavaScript窗格中使用标记。我监督了它，但它仍然不工作。@viruxx，可能是beca使用您的代码是一团乱麻。OP中没有名为form的id。如果您在测试JSFIDLE，那么您没有正确使用JSFIDLE。@Viruzz，当您记得将jQuery添加到JSFIDLE时，它就起作用了：@Viruzz我尝试了完整的代码。它起作用了。可能是您没有添加jQuery。请在我更新时尝试。

$("#contactForm").submit(function (e) {
   // Your code
   return false;
});