title: Backbone rebinding events on a view
body: <p>I have two views, one represents a view of clients and the other is the individual client views. I am binding the <code>mouseenter</code> and <code>mouseleave</code> events in the client view to fade in and out an overlay on the image. This works fine when it is by itself. However, I am also using a jQuery plugin to do a carousel effect (plugin <a href="http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/" rel="noreferrer">here</a>). Once that is enabled, my custom events no longer work. Is there any way I can delegate the Client View events after the plugin is initialized? This is my first time using Backbone so I might be doing something else wrong as well.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>// Client View
  window.ClientView = Backbone.View.extend({
    tagName: 'li',
    template: _.template($("#client-template").html()),
    className: 'client-thumb',
  
    events: {
      "mouseenter": "fadeOutOverlay",
      "mouseleave": "fadeInOverlay"
    },
  
    initialize: function() {
    },
  
    render: function() {
      $(this.el).html(this.template(this.model.toJSON()));
      return this;
    },
  
    fadeOutOverlay: function() {
      $(this.el).find(".slider-image-overlay").fadeOut('fast');
    },
  
    fadeInOverlay: function() {
      $(this.el).find(".slider-image-overlay").fadeIn('fast');
    }
  
  });
  
  // Clients View
  window.ClientsView = Backbone.View.extend({
    el: "#clients",
  
    initialize: function() {
      this.collection.bind('all', this.render, this);
    },
  
    render: function() {
      var $clients = $("&lt;ul class='clearfix'&gt;&lt;/ul&gt;");
      _.each(this.collection.models, function(client) {
        var view = new ClientView({model: client});
        $clients.append(view.render().el);
      });
  
      $(this.el).hide().append($clients).fadeIn().scrollingCarousel();
  
      return this;
    }
  });
  </code></pre>
  
  <p><strong>EDIT</strong>: Here I am trying to <code>delegateEvents()</code> on the views that were created (the ones that have the events on them):</p>
  
  <pre><code>App.View.ClientsView = Backbone.View.extend({
    el: "#clients",
  
    initialize: function() {
      this.collection.bind('all', this.render, this);
    },
  
    render: function() {
      var $clients = $("&lt;ul class='clearfix'&gt;&lt;/ul&gt;");
      var views = [];
      _.each(this.collection.models, function(client) {
        var view = new App.View.ClientView({model: client});
        views.push(view); // Store created views in an array...
        $clients.append(view.render().el);
      });
  
      $(this.el).hide().append($clients).fadeIn().scrollingCarousel({
        // Use the plugin's callback to try to delegate events again
        afterCreateFunction: function() {
          _.each(views, function(view){
            view.delegateEvents();
          });
        }
      });
  
      return this;
    }
  });
  </code></pre>
  
  <p>Tried this but doesn't seem to work? Am I doing it right? I think that the plugin is doing more than I think to the DOM. It looks like it is touching the elements I am trying to bind to as well as binding to <code>mouseenter</code> and <code>mouseleave</code>. I am unfamiliar with this plugin, doesn't look like it has an unminified version so I can't read it too well.</p>
  
  <p>Any other suggestions?</p>