防止頁面重新加載表單按鈕點擊流星？

Question

不確定這是Meteor問題，JavaScript問題還是其他問題。 單擊表單按鈕會導致不需要的頁面重新加載。

其他信息：

• 使用Bootstrap包
• 使用jQuery包
• 使用Backbone包
• 即使刪除上面的包，頁面重新加載問題仍然會發生

• 注釋掉Posts.insert（）行也不能解決問題

  //來自application.js
  // *這是應用程序中唯一與事件相關的代碼（ 除了流星從我們身上抽象出來的任何幕后信息 ）

   Template.new_post.events = { 'click #submit' : function () { var text = $('#title').val(); var cat = $('#category').val(); // save our post with the value of the textbox Posts.insert({title : text, category : cat}); } }; 

  //來自index.html

   <template name="new_post"> <form class="form-horizontal"> <fieldset> <div class="control-group"> <!-- Text input--> <label class="control-label" for="title">Title</label> <div class="controls"> <input type="text" id="title" value="{{text}}" class="input-xlarge"> <p class="help-block">Hint: Summarize your post in a few words</p> </div> </div> <div id="form-part-2"> <div class="control-group"> <label class="control-label" for="categories">Category</label> <div class="controls"> <select class="input-xlarge" id="category"> {{#each categories}} <option value="{{defaultLabel}}">{{defaultLabel}}</option> {{/each}} </select> <p class="help-block">Hint: Choose a category</p> </div> </div> <!-- Button --> <div class="control-group"> <div class="controls"> <button class="btn btn-success" id="submit">Done</button> </div> </div> </div><!-- end div form-part-2 --> </fieldset> </form> </template> 

Answer 1

我認為你必須在函數結束時返回false以防止提交。

Answer 2

除了返回false您還可以對傳遞給處理程序的事件調用preventDefault() ：

'click #submit' : function (template, event) {
  ...
  event.preventDefault();
}

這只會阻止默認操作（即提交表單），但不會阻止事件傳播。