title: How to keep Backbone events working with $el.html() method?
body: <p>I'm writing a <code>Backbone App</code> where I'm trying to render a result list retrieved when I write on an <code>input</code> field.</p>
  
  <p>This is basically my app</p>
  
  <pre><code>var Dropdown = {
      Models: {},
      Collections: {},
      Views: {},
      Templates:{}
  }
  
  Dropdown.Models.Product = Backbone.Model.extend({
      defaults: dropdown.product.defaults || {},
      initialize:function () {
          console.log('Dropdown.Models.Product &gt; initialize');
      }
  });
  
  Dropdown.Collections.Products = Backbone.Collection.extend({
      model: Dropdown.Models.Product,
      initialize:function () {
          console.log('Dropdown.Collections.Products &gt; initialize');
  
      }
  });
  
  Dropdown.Views.App = Backbone.View.extend({
      initialize:function () {
          console.log('Dropdown.Views.App &gt; initialize');
          this.subView = {
              Product : new Dropdown.Views.Product({
                  collection : new Dropdown.Collections.Products()
              })
          }
      },
      render:function (options, term) {
          console.log('Dropdown.Views.App &gt; render');
          var defaults = {
              where:false,
              products:{
                  id:"product-results"
              }
          }
          var settings = $.extend(true, defaults, options);
          this.$el.html(this.subView.Product.render(settings.products.view, term).$el);
          // this.delegateEvents();
      }
  });
  
  Dropdown.Views.Product = Backbone.View.extend({
      initialize:function () {
          console.log('Dropdown.Views.Product &gt; initialize');
      },
      events: {
          "click .close": "closeResults",
      },
      closeResults:function (event) {
          console.log('Dropdown.Views.Product &gt; closeResults');
          var view = this;
          this.$el.animate({height:0}, 500, function () {
              $(this).removeAttr('style');
              view.$el.hide();
          });
      },
      render:function (view, term) {
          this.$el.show();
          console.log('Dropdown.Views.Product &gt; render');
          var data = (this.collection || this.model).toJSON();
          var template = Handlebars.compile($(this.template).html());
          this.$el.html(template({view:view, results:data}));
          this.delegateEvents(this.events); // to assign events if I'm using $el.html(...)
          return this;
      }
  });
  </code></pre>
  
  <p>The app works, but I lost events after the second <code>render</code> method is called, probably because of the <code>.html()</code> method is called.</p>
  
  <p>First callback:</p>
  
  <pre><code> ---------------------
  | app widget          |
   ---------------------
  | result 1            |
  | result 2            |
   ---------------------
  |               close | &lt;= event closeResults works
   ---------------------
  </code></pre>
  
  <p>Second callback:</p>
  
  <pre><code> ---------------------
  | app widget          |
   ---------------------
  | result 1            |
  | result 2            |
  | result 3            |
   ---------------------
  |               close | &lt;= event closeResults lost
   ---------------------
  </code></pre>
  
  <p>If I try to change my app's method render to this:</p>
  
  <pre><code>render:function (view, term) {
      this.$el.show();
      console.log('render');
      var data = this.collection.toJSON() || this.model.toJSON();
      var template = Handlebars.compile($(this.template).html());
      // CHANGED this.$el.html to this.$el.append
      this.$el.append(template({view:view, results:data}));
      return this;
  }
  </code></pre>
  
  <p>The events work always, but I accumulate server responses into the app's html, so this is the result:</p>
  
  <p>First callback:</p>
  
  <pre><code> ---------------------
  | app widget          |
   ---------------------
  | result 1            |
  | result 2            |
   ---------------------
  |               close | &lt;= event closeResults works
   ---------------------
  </code></pre>
  
  <p>Second callback:</p>
  
  <pre><code> ---------------------
  | app widget          |
   ---------------------
  | result 1            |
  | result 2            |
   ---------------------
  |               close | &lt;= event closeResults works
   ---------------------
  | app widget          | &lt;= appended content, it doesn't replace previous result
   ---------------------
  | result 1            |
  | result 2            |
  | result 3            |
   ---------------------
  |               close | &lt;= event closeResults works
   ---------------------
  </code></pre>
  
  <p>Basically with append I keep the events working but I don't replace the contents, how should I keep events working with <code>html</code> method?</p>
  
  <p>Should I keep using <code>append</code> and prevent the duplicates in some way I missing?</p>