jQuery表单提交是刷新页面

时间:2018-05-09 19:15:26

标签: javascript html

有人可以告诉我为什么这段代码不起作用?它只是刷新页面。

 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;
    });

我在同一页面上有两个这样的表格。它们是使用Handlebars动态添加的。

<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')
    });

2 个答案:

答案 0 :(得分:0)

我的代码出现了同样的错误,请不要担心 - 这很容易解决。

您是否尝试添加:

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>

答案 1 :(得分:-1)

根据您没有看到警报的事实判断,丢失的代码中存在语法错误,这会使解析器丢弃整个脚本块。

(Number of Cores)-1
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;
});