title: Meteor - preventDefault not preventing default
body: <p>I'm busy with David Turnbull's - Your first Meteor Application. Everything works up to the point where I try and add a new player to the list via a form. My problem is that preventDefault is not preventing the form from trying to submit and reloading the page. return false doesn't work either.</p>
  
  <p>Any ideas why this will be happening?</p>
  
  <p>Thanks</p>
  
  <pre><code>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 != '' &amp;&amp; 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
          });
        }
      }  
    });
  }
  </code></pre>
  
  <p>Template</p>
  
  <pre><code>&lt;template name="addPlayerForm"&gt;
  
  &lt;div id="add-player" class="reveal-modal" data-reveal&gt;
      &lt;a class="close-reveal-modal"&gt;&amp;#215;&lt;/a&gt;
      &lt;h2&gt;Add a player&lt;/h2&gt;
      &lt;p class="lead"&gt;Add another player to the leaderboard&lt;/p&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="small-8 column small-centered"&gt;
              &lt;form id="new-player"&gt;
                  &lt;div class="row collapse"&gt;
                      &lt;div class="small-8 column"&gt;
                          &lt;input type="text" placeholder="Player name" name="playerName"&gt;
                      &lt;/div&gt;
                      &lt;div class="small-4 column"&gt;
                          &lt;input type="submit" class="button postfix" value="add player"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/template&gt;
  </code></pre>