title: Backbone.js hover event not triggering
body: <p>I'm trying to use Backbone.js for the first time and I'm having some trouble. I don't know if my problem is that I'm not understanding how backbone is supposed to work or if it's just a code problem.</p>
  
  <p>I'm trying to create a dynamic menu, and I have no problem creating the main menu bar with it's items, but I can't get the hover event to trigger whenever I hover one of the menu items.</p>
  
  <p><strong>Views</strong></p>
  
  <pre><code>var MenuView = Backbone.View.extend({
      initialize: function(items) {
          this.menu = items;
          //Main navigation bar
          this.el = $("#main-nav");
          this.trigger('start');
          this.render();
      },
      render: function() {
          var me = this;
          _.each(this.menu, function(mi) {
              mi.render(me.el);
          });
          return this;
      },
      handleHover: function(e) {
          console.debug(e);
      }
  });
  
  var MenuItemView = Backbone.View.extend({
      tagName: 'li',
      className:'menu-item',
      events: { //none of these work
          'hover a':'handleHover',
          'mouseover a':'handleHover',
          'mouseover':'handleHover',
          'click': 'handleHover',
          'click a': 'handleHover'
      },
      initialize: function(mi) {
          this.menuItem = mi;
          this.el = $("&lt;li class=\"menu-item\"&gt;&lt;/li&gt;")
      }, 
      render: function(parent) {
          this.el.append('&lt;a href="' + this.menuItem.get("link") + '"&gt;' + this.menuItem.get("text") + '&lt;/a&gt;');
          parent.append(this.el);
          return this;
      },
  
      handleHover: function(ev) {
          console.debug("Hovering! " + ev + this.menuItem.get("cid"));
          console.debug(ev);
          return false;
      }
  });
  </code></pre>
  
  <p><strong>Model</strong></p>
  
  <pre><code>var MenuItem = Backbone.Model.extend({
      defaults: {
          parent: null,
          children: [],
          link: "",
          text: ""
      }   
  });
  </code></pre>
  
  <p><strong>Startup code</strong></p>
  
  <pre><code>$(document).ready(function() {
      var menu = new MenuView([
          new MenuItemView( new MenuItem({link: "/", text: "Home"})),
          new MenuItemView( new MenuItem({link: "/", text: "Users"})),
          new MenuItemView( new MenuItem({link: "/", text: "Configuration"}))
      ]);
  });
  </code></pre>
  
  <p>Any help will be appreciated!</p>
  
  <p>Thanks!</p>
  
  <p><strong>Update</strong></p>
  
  <p>Ok, after taking the definition of <code>el</code> outside of the <code>initialize</code> method on the MenuItemView view, it works, BUT that same element gets reused on all instances of the view, so I had to change the view to the following code in order to make it work the way I want it:</p>
  
  <pre><code> var MenuItemView = Backbone.View.extend({
  
      events: { //none of these work
          'hover a':'handleHover',
          'mouseover a':'handleHover',
          'mouseover':'handleHover',
          'click': 'handleHover',
          'click a': 'handleHover'
      },
      el: $('&lt;li class="menu-item"&gt;&lt;/li&gt;'),
      initialize: function(mi) {
          this.menuItem = mi;
          this.el = $(this.el).clone(true);
      }, 
      render: function(parent) {
          this.el.append('&lt;a href="' + this.menuItem.get("link") + '"&gt;' + this.menuItem.get("text") + '&lt;/a&gt;');
          parent.append(this.el);
          return this;
      },
  
      handleHover: function(ev) {
          console.debug("Hovering! " + ev + this.menuItem.get("cid"));
          console.debug(ev);
          return false;
      }
  });
  </code></pre>
  
  <p>Wny do I have to clone the element on a new instance? </p>