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>