jQuery表单提交是刷新页面

Question

有人能告诉我为什么这段代码不起作用吗？这只是刷新页面而已。

 jQuery(document).on('submit', '.comment-form', function (event) {
        alert('hello')
        event.preventDefault();

        const form = jQuery(this);
        const id = form.attr('id');

        console.log(id)


        //do stuff ...


        return false;
    });

我在同一页上有两张表格。它们是动态添加的，使用手柄。

<form class="column-form comment-form" id="{{_id}}">
    <div class="">
        <div class="col-12-10 col-medium-12-12 comment-content">
            <input placeholder="Add a comment" type="text" value="" id="comment-{{_id}}" name="">
        </div>
        <div class="col-12-2 col-medium-12-12 flex comment-submit">
            <input value="Submit" type="submit" />
        </div>
    </div>
</form>

*编辑*

    jQuery(document).on('submit', '.comment-form', function (event) {
        event.preventDefault();
        alert('hello')
    });

Answer 1

我的代码也有同样的错误，别担心--这是一个简单的解决方法。

你有没有试着添加：

onsubmit="return false;"

您的代码应该如下所示：

<form onsubmit="return false;" class="column-form comment-form" id="{{_id}}">
  <div class="">
    <div class="col-12-10 col-medium-12-12 comment-content">
      <input placeholder="Add a comment" type="text" value="" id="comment-{{_id}}" name="">
    </div>
    <div class="col-12-2 col-medium-12-12 flex comment-submit">
      <input value="Submit" type="submit" />
    </div>
  </div>
</form>

Answer 2

从您没有看到警报的事实来看，缺少的代码中有一个语法错误，这使得解析器丢弃了整个脚本块。

​

jQuery(document).on('submit', '.comment-form', function(event) {
  alert('hello')
  event.preventDefault();

  const form = jQuery(this);
  const id = form.attr('id');

  console.log(id)


  //do stuff ...


  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="column-form comment-form" id="{{_id}}">
  <div class="">
    <div class="col-12-10 col-medium-12-12 comment-content">
      <input placeholder="Add a comment" type="text" value="" id="comment-{{_id}}" name="">
    </div>
    <div class="col-12-2 col-medium-12-12 flex comment-submit">
      <input value="Submit" type="submit" />
    </div>
  </div>
</form>

​