title: Backbone view - created on mouse enter not firing events
body: <p>I am using a jQuery tool tip plug-in that requires the use of the jQuery clone function to populate an auto generated tooltip. For the project I am working on, I don't have controle over when the tooltip is initiated nor is there an available callback so I am using jQuery .on('mouseenter') to initialize my event.</p>
  
  <p>Anything I put within the initialize function works, but my click event wont fire. From what I have read, if el is defined then standard events (click) should automatically be bound but that is not happening and as far as I can tell this should be working correctly.</p>
  
  <p>javascript:</p>
  
  <pre><code>Lot = Backbone.View.extend({
      initialize: function(){
          this.wrapper = $(this.$el).find('.childDiv');
          $(this.$el).css('background-color', 'blue');
          console.log('init');
      },
      events: {
        'click .showChild': 'showfunction'
      },
      showfunction:function(e){
           this.wrapper.slideToggle('fast');   
      }
  });
  
  //gives the auto generated tooltip a class, otherwise it would be classless
  $.balloon.defaults.classname = "balloon";
  
  //tooltip needs content passed in, the tooltip creator recommends using clone
  $('#showParent')
     .balloon({contents: $('.tooltip-content').clone(), position: "bottom right" });
  
  // this may look redundant, but I do not have access to the initialize function
  $('#showParent').on('mouseenter', function() {
      console.log('mouse enter');
      lots = new Lot({el: $('.balloon .tooltip-content')});
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button id="showParent"&gt;Hover&lt;/button&gt;
  &lt;div id="wrapper"&gt;
      &lt;div class="parentDiv tooltip-content"&gt;
          &lt;h1&gt; Some text to test parent&lt;/h1&gt;
          &lt;button class="showChild"&gt;Click&lt;/button&gt;
          &lt;div class="childDiv"&gt;
              &lt;h2&gt; here is a child div&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a fiddle: <a href="http://jsfiddle.net/KFkjZ/" rel="nofollow">http://jsfiddle.net/KFkjZ/</a></p>
  
  <p>any insite as to why the events may not be binding is appreciated </p>