title: e.preventDefault() being skipped for modal load
body: <p>I have found this code that uses ajax to load a modal it is just what I need to load dynamic modals from my datatables. I have an a tag setup to load a modal heres an example </p>
  
  <pre><code>&lt;a class="blue" href="/api/getmodal/products/' + str(self.result.ids) + '" data-toggle="modal"&gt; 
      &lt;i class="icon-zoom-in bigger-130"&gt;&lt;/i&gt; 
  &lt;/a&gt; 
  </code></pre>
  
  <p>The link goes to the modal code and just the modal code the last section is the product id that it adds in so it creates a unique request to the api that will then serve this page. I have been playing with the code at this link <a href="https://gist.github.com/drewjoh/1688900" rel="nofollow">jQuery ajax bootstrap modal loading</a> now the issue I have is that instead of the <code>e.preventDefault</code> running it seems to ignore it and jump to the link can anyone see what I might be doing wrong here. Looked for errors and there doesn't seem to be any errors in the jog and it doesn't get into the click function from what I have found but will keep trying to fix while I wait for responses.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>jQuery is properly loaded above this code I am using jinja2 and all the important js is included in my base template then included in my child using <code>{{ super() }}</code> then all other script is run under this there is one other bit of JavaScript that run before this that works perfectly that is just for the datatable I will include my entire js section below. The console.log sections are just for my debugging to see if it reaches the code.</p>
  
  <pre><code>jQuery(function($) {
          var oTable1 = $('#sample-table-2').dataTable( {
          "sAjaxSource": '/api/products/datatables',
          "aoColumns": [
            null, null,null, null, null,
            { "bSortable": false }
          ] } );
  
  
          $('table th input:checkbox').on('click' , function(){
              var that = this;
              $(this).closest('table').find('tr &gt; td:first-child input:checkbox')
              .each(function(){
                  this.checked = that.checked;
                  $(this).closest('tr').toggleClass('selected');
              });     
          });
      })
  
      $(document).ready(function() {
          // Support for AJAX loaded modal window.
          $('[data-toggle="modal"]').click(function(e) {
              sleep(10000)
              e.preventDefault();
              console.log('point two');
              var url = $(this).attr('href');
              if (url.indexOf('#') == 0) {
                  $(url).modal('open');
                  console.log('point two');
                  sleep(1000);
              } else {
                  $.get(url, function(data) {
                      $('&lt;div class="modal hide fade"&gt;' + data + '&lt;/div&gt;').modal();
                      console.log('point three');
                  });
              }
          });
      });
  </code></pre>
  
  <p><strong>EDIT:</strong>
  The link to the modal is just a webapp2 route I know the route works correctly as it loads the content of the modal but with no styling as it is supposed to be added to the main page and doesn't need it.</p>
  
  <p><strong>EDIT:</strong>
  From reading the bootstrap docs this is what i have come up with it no longer loads to the page but the modal doesn't work either I think I have it right but not sure.</p>
  
  <pre><code>&lt;a class="blue" data-toggle="modal" href="/api/getmodal/products/' + str(self.result.ids) + '" data-target="#modalProduct" &gt; 
      &lt;i class="icon-zoom-in bigger-130"&gt;&lt;/i&gt; 
  &lt;/a&gt; 
  </code></pre>