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>

- wind_kind

---

你能同时包含你的模板吗？ - Scott

我添加了模板并根据您的答案进行了更新，但没有任何变化。表单仍然会提交并刷新页面。 - wind_kind

刚刚更新了我的回答。 - Scott

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。

- Scott

---

那就是问题所在。我使用了错误模板的事件。感谢您的帮助。 - wind_kind

有一个我发现的小技巧（因为某些日子就是这么糟）：如果你将 event.preventDefault() 放在函数实现的末尾，而之前的代码出现未处理的异常，那么表单会在你看到日志中的异常（以及阻止默认行为）之前提交并导致页面刷新。应该在你的代码之前调用 event.preventDefault()。 - Bob Davies

Answer 2

好的，我和发帖者犯了同样的错误，现在我在这里放上正确的代码：

在HTML文件中：

<template name="addPlayerForm">
  <form>
    <input type="text" name="playerName">
    <input type="submit" value="Add Player">
  </form>
</template>

在 js 文件中：

Template.addPlayerForm.events({
    'submit form': function(event){
        event.preventDefault();
        console.log("Form submitted");
        console.log(event.type);
    }
});

- Q. Qiao