javascript - meteor - preventDefault 不阻止默认

Question

我正忙于 David Turnbull 的 - 你的第一个 Meteor 应用程序。一切正常，直到我尝试通过表单将新玩家添加到列表中。我的问题是 preventDefault 没有阻止表单尝试提交和重新加载页面。 return false 也不起作用。

知道为什么会发生这种情况吗？

谢谢

PlayersList = new Mongo.Collection('players');

if (Meteor.isClient) {

  //Helpers
  Template.leaderboard.helpers({
    'player': function() {
      return PlayersList.find({}, {sort: {score: -1, name: 1}});
    },
    'playerCount': function() {
      return PlayersList.find().count();
    },
    'selectedClass': function() {
      var playerId = this._id;
      var selectedPlayer = Session.get('selectedPlayer');
      if(playerId == selectedPlayer) {
        return 'selected'
      }
    },
    'showSelectedPlayer': function() {
      var selectedPlayer = Session.get('selectedPlayer');
      return PlayersList.findOne(selectedPlayer);
    }
  });

  //Events
  Template.leaderboard.events({
    'click .player': function() {
      var playerId = this._id;
      Session.set('selectedPlayer', playerId);
    },
    'click .increment': function() {
      var selectedPlayer = Session.get('selectedPlayer');
      var increaseBy = document.getElementById('increase-by').value;
      var isNumber = /^\d+$/.test(increaseBy);
      if(increaseBy != '' && isNumber) {
        PlayersList.update(selectedPlayer, {$inc: {score: +increaseBy}});
      }
    },
    'click .decrement': function() {
      var selectedPlayer = Session.get('selectedPlayer');
      var decreaseBy = document.getElementById('decrease-by').value;
      PlayersList.update(selectedPlayer, {$inc: {score: -decreaseBy}});
    },
    'submit #new-player': function(event) {
      event.preventDefault();
      var playerNameVar = event.target.playerName.value;

      if(playerNameVar != '') {
        PlayersList.insert({
          name: playerNameVar,
          score:0
        });
      }
    }  
  });
}

模板

<template name="addPlayerForm">

<div id="add-player" class="reveal-modal" data-reveal>
    <a class="close-reveal-modal">&#215;</a>
    <h2>Add a player</h2>
    <p class="lead">Add another player to the leaderboard</p>

    <div class="row">
        <div class="small-8 column small-centered">
            <form id="new-player">
                <div class="row collapse">
                    <div class="small-8 column">
                        <input type="text" placeholder="Player name" name="playerName">
                    </div>
                    <div class="small-4 column">
                        <input type="submit" class="button postfix" value="add player">
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>

</template>

Answer 1

我没看过这本书，我不知道你的模板是什么样子的，但问题很可能是选择器问题。

也许尝试为您的表单分配一个 ID 并将提交事件映射到该 ID:

// html file
<Template name="leaderboard">
  <form id="new-player">
    <input type="text" name="playerName">
    <input type="submit" value="Submit">
  </form>
</Template>

// js file
Template.leaderboard.events({
  'submit #new-player': function(event) {
    event.preventDefault();
    ...
  }
});

编辑

也许可以尝试将 Template.leaderboard.events 更改为 Template.addPlayerForm.events。