Meteor - preventDefault 不阻止默认答案

【问题标题】：Meteor - preventDefault not preventing defaultMeteor - preventDefault 不阻止默认
【发布时间】：2017-03-02 05:02:02
【问题描述】：

我正忙于 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>

【问题讨论】：

你能把你的模板也包括进来吗？
我添加了模板并根据您的回答进行了更新，但没有任何变化。表单仍然提交并刷新页面。
刚刚更新了我的答案

标签： javascript meteor

【解决方案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。

【讨论】：

这就是问题所在。我将事件用于错误的模板。感谢您的帮助。
我发现的实用技巧（因为有些日子是愚蠢的日子）如果您将 event.preventDefault() 放在函数实现的末尾并且在您之前的代码中发生未处理的异常，表单将提交并导致在您在日志中看到异常之前（以及在阻止默认设置之前）要刷新的页面。在您的代码之前调用event.preventDefault()。

【解决方案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);
    }
});

【讨论】：