视图中的每个按钮都会触发骨干事件？

Question

我有一个非常简单的Backbone.View在这里看到：

var app = app || {};

(function($) { 
    'use strict'; 

    app.HomeView = Jr.View.extend({ 
    template: Handlebars.compile($('#home-view').html()), 
    events: { 
     'click #show-workouts-list': 'showWorkouts', 
     "click #clear-localstorage": "clearLocalStorage" 
    }, 
    initialize: function() { 

    }, 
    render: function() { 
     this.$el.html(this.template({ numberOfWorkouts: this.collection.length })); 
     return this; 
    }, 
    showWorkouts: function() { 
     console.log('show workouts'); 
     var workoutsView = new app.WorkoutsView(); 
     app.Router.renderView(workoutsView); 

     /* cleanup the view after we move away */ 
     this.remove(); 
    }, 
    clearLocalStorage: function(event) { 
     console.log('cleared localstorage'); 
     localStorage.clear(); 
    } 
    }); 

})(Zepto); 

而且模板：

<script id="home-view" type="text/x-handlebars-template"> 
    <header class="bar-title"> 
    <div class="header-animated"> 
    <h1 class="title">robus</h1> 
    </div> 
    </header> 
    <div class="content content-padded"> 
    <ul class="list inset"> 
     <li> 
     <a id="show-workouts-list" href="#workouts"> 
      <strong>Workouts</strong> 
      <span class="chevron"></span> 
      <span class="count">{{ numberOfWorkouts }}</span 
     </a> 
     </li> 
    </ul> 
    <div id="clear-localstorage" class="button button-block button-negative">Clear localStorage</div> 
    </div> 
</script> 

当我点击了“明确的localStorage”按钮，showWorkouts()功能也被解雇，即使我声明了特定的ID在事件块。 clearLocalStorage()函数也被触发。

有什么理由呢？

Answer 1

这可能仅仅是你有一个跨度标记，非正常关闭：

<span class="count">{{ numberOfWorkouts }}</span