Binding Click event after append JQuery не работает

Question

У меня есть модальный ящик, который всплывает всплывающие окна, когда значок плюса щелкнут в таблице. После загрузки страницы в таблице отображаются пять строк, и щелчок знака «плюс» открывает окно модальности. (Работает отлично).

Но теперь мы меняем содержимое таблицы на вызов AJAX. После того, как TR заменены новыми, знаки плюса больше не работают.

Я знаю о том, что событие-обработчик

Таблица:

<table class="table table-hover" id="carsTable"> 
    <thead> 
    <tr> 
     <th>Car Title</th> 
     <th>Actions</th> 
    </tr> 
    </thead> 
    <tbody> 
     <tr id="car-1836"> 
      <td>ferrari f50</td> 
      <td><a href="#" class="black-modal-80" id="5269327"><i class="glyph-icon icon-plus-circle">+</i></a></td> 
     </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <th>Product Title</th> 
     <th>Actions</th> 
    </tr> 
    </tfoot> 
</table> 

Jquery часть, которая обрабатывает AJAX (и работает, заменил таблицу в соответствии с JSON RESPONS).

$.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('<tr id="car-'+ data[index].id+'"><td>' + data[index].title + '</td><td><a href="#" class="black-modal-80" id="' + data[index].externalProductId + '"><i class="glyph-icon icon-plus-circle"></i></a></td></tr>'); 
     } 
    }); 

}, "json"); 

Теперь обработчик событий, работает после того, как документ будет готов, но перестает работать после того, как вызов AJAX заменил данные.

$('#carsTable').on('click', '.black-modal-80', function() { 
    console.log('Click detected; modal will be displayed'); 
}); 

Что не так с привязкой?

Answer 1

Когда вы добавляете что-то в окно, элемент не существует, пока вы не запустите jQuery. Это означает, что элемент, на который указывает точка клика, не существует, когда определено событие клика. Таким образом, вы можете использовать тело как селектор, подобный этому.

$('body').on('click', '.black-modal-80', function() { 
    console.log('Click detected; modal will be displayed'); 
}); 

Надеюсь, это помогло!