title: How can I bind events to the 'el' in backbone that is dynamically created?
body: <p>I'm having some trouble binding events to a dynamically created element using backbone.</p>
  
  <p>Here is the code for the backbone view that generated the element. ('.modal')</p>
  
  <pre><code>var MakeModalView = Backbone.View.extend({
        el: '#btn-make-modal',
  
      events: {
          'click': 'makeModal'
      },
  
      makeModal: function () {
          $('body').html('&lt;div class="modal"&gt;&lt;div class="modal-close"&gt;&amp;times;&lt;/div&gt;Close me! I\'m a modal!&lt;/div&gt;');
      }
  });
  new MakeModalView();
  </code></pre>
  
  <p>Here is the View that controls the dynamically created element:</p>
  
  <pre><code>var ModalView = Backbone.View.extend({
      el: '.modal',
  
      events: {
          'click .modal-close': 'closeModal'
      },
  
      closeModal: function () {
          this.$el.remove();
      }
  });
  new ModalView();
  </code></pre>
  
  <p>The problem I'm having is that the view that controls the dynamically created element (ModalView) is not binding events to that dynamic element. ('.modal')</p>
  
  <p><strong>How can I bind elements to a dynamically created 'el' in backbone?</strong></p>
  
  <p>I've looked at the following solutions: </p>
  
  <p><a href="https://stackoverflow.com/questions/8452544/backbone-dynamically-created-el-not-binding-events">Backbone Dynamically created &#39;el&#39; not binding events</a></p>
  
  <p><a href="https://stackoverflow.com/questions/10142451/how-do-you-create-backbone-views-with-an-el-that-was-dynamically-created">How do you create Backbone views with an &#39;el&#39; that was dynamically created?</a></p>
  
  <p>But I still can't seem to figure out how to attach the events to the dynamic element.</p>
  
  <p>I've created a fiddle to demonstrate how this behavior works. <a href="http://jsfiddle.net/6wzzk/3/" rel="nofollow noreferrer">http://jsfiddle.net/6wzzk/3/</a></p>