7

これがMeteorの問題なのか、JavaScriptの問題なのか、それともそうでないのかわからない。フォームボタンをクリックすると、不要なページがリロードされます。

他の情報：

  • Bootstrapパッケージの使用
  • jQueryパッケージを使用する
  • バックボーンパッケージの使用
  • 上記のパッケージを削除しても、ページの再読み込みの問題が発生する

  • Posts.insert（）行をコメントアウトしても修正されません

    //application.jsから
    //*これはアプリ内の唯一のイベント関連コードです（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});
    }
};

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

2 に答える 2

13

送信を防ぐために、関数の最後でfalseを返す必要があると思います。

于 2012-12-06T03:41:32.943 に答える
5

戻る以外に、ハンドラーに渡されたイベントをfalse呼び出すこともできます。preventDefault()

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

これにより、デフォルトのアクション（つまり、フォームの送信）が妨げられるだけで、イベントの伝播が停止することはありません。

于 2013-08-02T21:04:18.690 に答える