title: bootstrap modals only firing once with remote datasource
body: <p>I have a table with a list of items and each item has a <code>&lt;select&gt;</code> with a list of statuses. Here's the process.</p>
  
  <ul>
  <li>When the status is changed, it should fire a modal.</li>
  <li>The modal is pulling in ajax data and works fine. </li>
  <li>The user can then click continue or cancel out of the modal box. </li>
  </ul>
  
  <p>This works the first time, but as soon as the modal is dismissed, the modal won't load a second time. The data is updating - I can see it in the inspect element, but the modal itself isn't firing more than once. </p>
  
  <p>Here's the relevant code: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select class="status form-control" data-id="14" data-ref="PT6F7SW514" name="status"&gt;
      &lt;option value="0" selected="selected"&gt;Pending&lt;/option&gt;
      &lt;option value="1"&gt;Approved&lt;/option&gt;
      &lt;option value="2"&gt;Rejected&lt;/option&gt;
  &lt;/select&gt;
  ...
  &lt;div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h4 class="modal-title"&gt;Modal Goes Here&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;&lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary"&gt;Send&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>$(document).ready(function(){
  
      $('.status').change(function(){
          var status = $(this);
          var val = $(status).val();
          var id = $(status).attr('data-id');
          var ref = $(status).attr('data-ref');
  
          $('.modal-body').load('/ajax/status/' + ref + '/' + val);
          $('#modal').modal();
  
      });
  });
  </code></pre>
  
  <p>Again, this is a table with multiple items, each of which has a <code>.status</code> select field. I can see in the console on the second attempt to fire the modal I'm getting the following error:</p>
  
  <pre><code>Uncaught TypeError: undefined is not a function
  </code></pre>
  
  <p>Associated to this line in the JS:</p>
  
  <pre><code>$('#modal').modal();
  </code></pre>
  
  <p>If I comment out <code>$('.modal-body').load()</code>, it works. </p>
  
  <p>I tried rewriting it into a separate ajax call instead of using <code>.load()</code>, but I have the same problem there. It seems like as soon as I manipulate the '.modal-body' it looses the ability to fire the modal.</p>