title: Binding Click event after append Jquery not working
body: <p>I've got a modal box that pops up popups when the plus icon is clicked in a table. After the page is loaded five rows are displayed in the table and clicking the plus sign opens the modal box. (Works perfectly). </p>
  
  <p>But now we are changing the content of the table by an AJAX call. Once the TR's are replaced by new ones, the plus signs aren't working any more. </p>
  
  <p>I'm aware of the fact that the event-handler </p>
  
  <p>Table: </p>
  
  <pre><code>&lt;table class="table table-hover" id="carsTable"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Car Title&lt;/th&gt;
          &lt;th&gt;Actions&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr id="car-1836"&gt;
              &lt;td&gt;ferrari f50&lt;/td&gt;
              &lt;td&gt;&lt;a href="#" class="black-modal-80" id="5269327"&gt;&lt;i class="glyph-icon icon-plus-circle"&gt;+&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
      &lt;tr&gt;
          &lt;th&gt;Product Title&lt;/th&gt;
          &lt;th&gt;Actions&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The Jquery Part that handles the AJAX (and works, replaced the table according to the JSON respons). </p>
  
  <pre><code>$.post("../../../scripts/getCars.php", {s: carSearch}, function (data) {
      $("tr[id='carLoader']").remove();
  
      $.each(data, function (index) {
          if ($('#selectedCar-' + data[index].externalProductId + '').length == 0) {
              $('#carsTable')
                      .append('&lt;tr id="car-'+ data[index].id+'"&gt;&lt;td&gt;' + data[index].title + '&lt;/td&gt;&lt;td&gt;&lt;a href="#" class="black-modal-80" id="' + data[index].externalProductId + '"&gt;&lt;i class="glyph-icon icon-plus-circle"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;');
          }
      });
  
  }, "json");
  </code></pre>
  
  <p>Now the event Handler, works after document is ready, but stops working once the AJAX call has replaced the data.</p>
  
  <pre><code>$('#carsTable').on('click', '.black-modal-80', function () {
      console.log('Click detected; modal will be displayed');
  });
  </code></pre>
  
  <p>What's wrong with the binding? </p>