Meteor - preventDefault does not prevent default

Question

I'm busy with David Turnbull - your first Meteor App. Everything works to such an extent that I try to add a new player to the list through the form. My problem is that preventDefault does not prevent the form from trying to submit and reload the page. return false doesn't work either.

Any ideas why this will happen?

thank

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

<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

I have never read a book, and I don’t know what your template looks like, but the problem is probably related to the selection problem.

Perhaps try to assign an identifier to your form and match the submit event with this identifier:

// 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();
    ...
  }
});

Edit

, Template.leaderboard.events Template.addPlayerForm.events.

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);
    }
});