title: How should I unbind events in BackBone.js view that opens a SimpleModal dialog?
body: <p>Every time I create a view and open the dialog, I get <code>n</code> sets of events where <code>n</code> is the number of times the dialog has been opened. In the sample below, each time I click <code>fooButton</code> I will get <code>n</code> button click events. I know I'm supposed to unbind events but <code>this.undelegateEvents()</code> isn't working. </p>
  
  <p>From what I understand about the way SimpleDialog (and other dialog widgets work), the contents of the div are copied into another element when the dialog is created, which suggest that I should be able to capture the created element (say <code>$dialog = this.$el.modal();</code> ) and then call undelegateEvents on that. This approach also isn't working.</p>
  
  <p>Any ideas?</p>
  
  <pre><code>MyDialogView = Backbone.View.extend({
      initialize: function(options){
          this.render();
      },
      render: function() {
  
          this.$el.empty().append("&lt;button id='fooButton'&gt;Foo&lt;/button&gt;");
  
          this.$el.modal({ "static": true });
      },
      events: {
          "click #fooButton": "fooPressed"
      },
      fooPressed: function() {
          alert("clicked");
  
          $.modal.close();
      }
  });
  
  $(function(){
      $("#openDialog").click(function() {
          new MyDialogView({el: $("#dialog") });
      });
  });
  </code></pre>
  
  <p>​Thanks for your help!</p>
  
  <p><strong>Solved by switching to JQuery UI Dialog. See my answer below.</strong></p>