如何在Meteor中点击表单按钮时防止页面重新加载？

Question

不确定这是 Meteor 问题、JavaScript 问题还是其他问题。点击表单按钮会导致不想要的页面重新加载。

其他信息：

• Using Bootstrap package
• Using jQuery package
• Using Backbone package
• Page-reload problem still happens even when above packages are removed

• Commenting out the Posts.insert() line doesn't fix it either

  // from application.js
  // *this is the only event related code in the app (aside from any behind-the-scenes stuff abstracted away from us by meteor)

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

  // from 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>
  

- eric

Answer 1

我认为你需要在函数末尾返回 false 以防止提交。

- Jonathan Vukovich-Tribouharet

---

我也遇到了这个问题。谢谢！ - Mister R2

在Meteor 1.0和Firefox 33中，return false似乎对我不起作用。 - Brylie Christopher Oxley

不，你不应该使用 return false。你应该始终使用 event.preventDefault();。 - Pedro Luz

Answer 2

除了返回false之外，您还可以在处理程序中调用传递给事件的参数上的preventDefault()：

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

这只会阻止默认操作（即提交表单），但不会停止事件传播。

- kynan

---

event.preventDefault()在Firefox上无效 http://stackoverflow.com/q/18464913/522050 - pahan

如果这个方法对你有效，你可以将它放在开头，这样后面的任何错误都不会导致页面刷新。 - Stephen Smith