title: Howto bind a click event in a Backbone subview
body: <p>I'm having problems understanding the event binding in a Backbone subview. My view is defined as follows:</p>
  
  <pre><code>TenantView = Backbone.View.extend({
    events: {
      "click": "setActive"
    },
    initialize: function() {
      this.parentEl = this.options.parentEl;
      return this.render();
    },
    template: new EJS({
      url: '/scripts/templates/tenant.ejs'
    }),
    render: function() {
      $(this.parentEl).children('ul').append(this.template.render(this.model));
      return this;
    },
    setActive: function(event) {
      return this.model.set('active', true);
    }
  });
  </code></pre>
  
  <p>The template simply consists of an <code>li</code> containg an <code>a</code>. Done this way, clicks events on my view are not catched, my method <code>setActive</code> is never triggered. </p>
  
  <p>When I extend my view by an <code>el</code> property like <code>el: 'li'</code> one of my (2) views acts properly and triggers the <code>setActive</code> function. The second view does not react at all. If I insepct the <code>el</code> property during the views initialization, the working view's <code>el</code> property points to the right <code>li</code>, the failing views <code>el</code> points to the first <code>li</code> that can be found in the page. </p>
  
  <p>As one can see, I am totally lost when it comes to the meaning of the <code>el</code> property.</p>
  
  <p>Question is, how can I bind a click on view to this very views <code>setActive</code> function?</p>
  
  <p>Can anyone enlighten me please?</p>
  
  <p>Regards
  Felix</p>