防止页面重新加载表单按钮点击流星?

Posted

技术标签:

【中文标题】防止页面重新加载表单按钮点击流星?【英文标题】:Prevent page reload on form Button click in meteor? 【发布时间】:2012-11-24 01:22:04 【问题描述】:

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

其他信息:

使用引导包 使用jQuery包 使用主干包 即使删除了上述软件包,仍然会出现页面重新加载问题

注释掉 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>

【问题讨论】:

【参考方案1】:

我认为您必须在函数结束时返回 false 以防止提交。

【讨论】:

我也遇到了这个问题。谢谢! return false 在 Firefox 33 的 Meteor 1.0 中似乎对我不起作用。 不,您不应该使用 return false。你应该总是使用event.preventDefault();【参考方案2】:

除了返回false,您还可以在event passed into your handler 上拨打preventDefault()

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

这只会阻止默认操作(即提交表单),但不会阻止事件传播。

【讨论】:

event.preventDefault() 在 firefox 上不起作用 ***.com/q/18464913/522050 如果这个方法适合你,你可以把它放在开头,这样以后的任何错误都不会导致页面刷新。

以上是关于防止页面重新加载表单按钮点击流星?的主要内容,如果未能解决你的问题,请参考以下文章

点击返回按钮时防止重新提交表单

防止在 django 中提交按钮后重新加载

表单提交后如何防止页面重新加载 - JQuery

即使在我重新加载页面后,如何防止已经在 J​​avascript 中启动的“onclick”功能?

求JS 大神指导,页面的防止重复点击事件(具体见补充)

重新路由Laravel后,防止重新加载页面表单