title: Bootstrap confirm-modal doesn't work when link is injected in <tbody>
body: <p>I have a mysql table with some customers and I have Jquery (live)search to search through the that table. When a customer is found you can delete or edit it as you can see below:</p>
  
  <p><img src="https://i.stack.imgur.com/qunSu.png" alt="enter image description here"></p>
  
  <p>But when I click on the delete button, I want to get a confirm dialog.
  I found this piece of code:</p>
  
  <pre><code>    $(document).ready(function() {
      $('a[data-confirm]').click(function(ev) {
          var href = $(this).attr('href');
  
          if (!$('#dataConfirmModal').length) {
              $('body').append('&lt;div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"&gt;&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 id="dataConfirmLabel"&gt;Confirm&lt;/h3&gt;&lt;/div&gt;&lt;div class="modal-body"&gt;&lt;/div&gt;&lt;div class="modal-footer"&gt;&lt;a class="btn btn-danger" id="dataConfirmOK"&gt;Yes&lt;/a&gt;&lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;No&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;');
          } 
          $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
          $('#dataConfirmOK').attr('href', href);
          $('#dataConfirmModal').modal({show:true});
          return false;
      });
  });
  </code></pre>
  
  <p>And the modal looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/ZVqBo.png" alt="enter image description here"></p>
  
  <p>This works perfect when I just do: </p>
  
  <pre><code>&lt;a href="#" data-confirm="Are you sure?"&gt;Delete&lt;/a&gt;
  </code></pre>
  
  <p>Now the thing is: the search results are injected in the html table like this:</p>
  
  <pre><code>&lt;tbody id="customers"&gt;&lt;/tbody&gt;
  </code></pre>
  
  <p>I pull the data from the mysql table like this:</p>
  
  <pre><code>     while ( $row = mysql_fetch_object( $fetch ) ) {
          $sResults .= '&lt;tr id="'. $row-&gt;customer_id . '"&gt;';
          $sResults .= '&lt;td&gt;' . $row-&gt;klantcode . '&lt;/td&gt;';
          $sResults .= '&lt;td&gt;' . $row-&gt;naam . '&lt;/td&gt;';
          $sResults .= '&lt;td&gt;' . $row-&gt;adres . '&lt;/td&gt;';
          $sResults .= '&lt;td&gt;' . $row-&gt;plaats . '&lt;/td&gt;';
          $sResults .= '&lt;td&gt;&lt;a href=index.php?actie=klantbewerken&amp;klant=' . $row-&gt;klantcode . '&gt;&lt;img class="del" src="../includes/img/edit.png"/&gt;&lt;/td&gt;';
          $sResults .= '&lt;td&gt;&lt;a href=index.php?actie=verwijderen&amp;klant=' . $row-&gt;klantcode . ' data-confirm="Are you sure?"&gt;&lt;img class="del" src="../includes/img/delete.png"/&gt;&lt;/td&gt;';
          $sResults .= '&lt;/tr&gt;';
      } 
  
  }
  echo $sResults;
  </code></pre>
  
  <p>And the jquery:</p>
  
  <pre><code>$(document).ready(function(){
  
      $('#customers').html('&lt;p&gt;Search for a customer.&lt;/p&gt;');
      $('#customersearch').keyup(function() {
          var searchVal = $(this).val();
  
          if(searchVal !== '') {
         $.get('../administration/page/customers/customersearch.php?klant='+searchVal, function(returnData) {
  
                  if (!returnData) {
                      $('#customers').html('&lt;p&gt;No customers found.&lt;/p&gt;');
                  } else {
                      $('#customers').html(returnData);                        
                  }  
  
              });
          } else {
              $('#customers').html('&lt;p&gt;Search...&lt;/p&gt;');
          }
      });
  });
  </code></pre>
  
  <p>So the question is: Why can I get the confirm modal when I do like this: </p>
  
  <pre><code>&lt;a href="#" data-confirm="Are you sure?"&gt;Delete&lt;/a&gt; 
  </code></pre>
  
  <p>and why it doesn't work when the <code>data-confirm</code> attribute is injected with the search results like:</p>
  
  <pre><code>$sResults .= '&lt;td&gt;&lt;a href=index.php?actie=verwijderen&amp;klant=' . $row-&gt;klantcode . ' data-confirm="Are you sure?"&gt;&lt;img class="del" src="../includes/img/delete.png"/&gt;&lt;/td&gt;';
  </code></pre>