event.preventDefault() 不起作用，表单仍然提交

Question

我想使用event.preventdefault((;但是我的表格仍然提交。并给我一个带有JSON回复的页面。我的控制台没有任何错误。

这是我的脚本：

$(document).ready(function() {
  $('#add_to_cart ').on('submit', function(event) {
    event.preventDefault();
    var $form = $(event.target);
    var data = $form.serialize();
    $.ajax({
      url: $form.attr('action'),
      type: $form.attr('method'),
      data: data,
      success: function(response, status, xhr) {
        var message = response.message;
        showToastMessage(message, 'toast-success');
      }
    }).fail(function(xhr, textStatus) {
      var message = "Error.";
      if (xhr.responseText) {
        var error = JSON.parse(xhr.responseText);
        if (error) {
          error = error.message;
          if (error) {
            message = error;
          }
        }
      }
      showToastMessage(message, 'toast-error')
    });
    return false;
  });
});
function showToastMessage(message, type) {
  var $toastElem = $("#snackbar");
  $toastElem.className = "show";
  $toastElem.html(message).removeClass('toast-success').removeClass('toast-error').addClass(type).addClass('show');
}

我已经看到了有关此临床的大多数问题，但是我仍然有problom。

html：

<form action="{{ route('cart.add', $product->id) }}" method="POST" id="add_to_cart">
  <a href="javascript:{}" rel="nofollow" data-nid="4165" class="cart-button ripple add-to-cart has-ripple" onclick="parent().submit();";>add</a>
</form>

Answer 1

这是您的问题：

<a href="javascript:{}" rel="nofollow" data-nid="4165" class="cart-button ripple add-to-cart has-ripple" onclick="parent().submit();";>add</a>

提交事件仅由表单提交触发，由标准提交方法(例如提交按钮(触发。

使用JavaScript调用表单的submit()方法将完全绕过提交事件。

由于事件未触发，事件侦听器函数未调用，因此event.preventDefault()从未被调用。

使用提交按钮，而不是连接一些JS的有用URL的链接。