title: .on() function not working for Ajax Loaded Form in Bootstrap Modal
body: <p>So I am loading a form by doing the following in the <strong>index.html</strong>.</p>
  
  <pre><code> $(".add-cell").click(function(ev) { // for each edit contact url
          ev.preventDefault(); // prevent navigation
          var url = $(this).data("form"); // get the contact form url
          $("#cell-modal").load(url, function() { // load the url into the modal
              $(this).modal('show'); // display the modal on url load
          });
          return false; // prevent the click propagation
      });
  </code></pre>
  
  <p>This loads a form located in a file <strong>add.html</strong>. This is the form:</p>
  
  <pre><code> &lt;div class="modal-header"&gt;
     &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
      &lt;h3&gt;{{l_name}}, &lt;small&gt;new cell&lt;/small&gt;&lt;/h3&gt;
   &lt;/div&gt;
   &lt;div class="modal-body"&gt;
      &lt;form class="cell-form" action="/cells/add/{{l_name}}/{{l_id}}/" method="post"&gt;   
       {% csrf_token %}
       {{ cell_form.as_table }}
       &lt;/form&gt;
   &lt;/div&gt;
   &lt;div class="modal-footer"&gt;
       &lt;input class="btn btn-success submit" type="submit" id="cell_submit" value="Submit" /&gt;
       &lt;input type="button" name="cancel" class="btn btn-danger" data-dismiss="modal" value="Close"/&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Now, in my <strong>index.html</strong> I have this code:</p>
  
  <pre><code> $('.cell-form').on('submit', function() {
          $.ajax({ 
              type: $(this).attr('method'), 
              url: this.action, 
              data: $(this).serialize(),
              context: this,
              success: function(data, status) {
                 //Do stuff
              }
          });
          return false;
      });
  </code></pre>
  
  <p>This code works, and this script is located in the <strong>index.html</strong>, not in <strong>add.html</strong>. However, why is this code, for the button in the <strong>add.html</strong> not working when placed in the <strong>index.html</strong>?: </p>
  
  <pre><code>    $("#cell_submit").on('click', function(event){
          alert("LOL");
      });
  </code></pre>
  
  <p>I would like to place my JS in the index.html... not in the add.html.</p>
  
  <p>Thanks!</p>