流星 - 防止默认不阻止默认

Meteor - preventDefault not preventing default

本文关键字：默认 流星      更新时间：2023-09-26

我正忙于David Turnbull's - Your First Meteor Application。一切都很好，直到我尝试通过表单将新玩家添加到列表中。我的问题是 preventDefault 不会阻止表单尝试提交和重新加载页面。返回假也不起作用。

任何想法为什么会发生这种情况？

谢谢

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>

我从未读过这本书，也不知道你的模板是什么样子的，但问题可能是由于选择器问题造成的。

也许尝试为您的表单分配一个 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。

好的，我犯了与海报相同的错误，我在这里放置了正确的代码：

在 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);
    }
});
相关文章：