Событие jQuery не запускается после перезаписи элемента DOM

Question

Сначала я динамически записываю таблицу в div с помощью innerHTML, а затем пытаюсь заставить функцию jQuery работать, когда пользователь наводит курсор на ячейку таблицы. Функция jQuery запускается на таблице, которая существует в HTML, но как только я перезаписываю innerHTML новой таблицей, jQuery больше не запускает функцию при наведении курсора.

<div id="replaceThis">
    <table id="myTable">
        <tr><td class="myCell">Help</td></tr>
    </table>
</div>

Затем я использую.on('mousenter') для запуска функции

$('#myTable tr td.myCell').on('mouseenter',function(){alert('omg help'); }

Все это работает нормально, пока я не заменю innerHTML элемента div новой таблицей, намного большей, которая создается с циклом прохождения по некоторым данным. Затем jQuery не запускает функцию на указателе мыши, даже если идентификаторы и классы совпадают.

Answer 1

Используйте делегированные события. Когда вы заменяете тело, оно генерирует новые HTML-элементы, к которым больше не подключен ваш обработчик событий.

jQuery предоставляет функцию делегированного обработчика с selector параметр на функцию включения.

Например:

$('body').on('mouseenter', '#myTable tr td.myCell', function(){alert('omg help'); }

Прочтите параграф о прямых и делегированных событиях в документации: http://api.jquery.com/on/

Answer 2

После перезаписи элемента DOM события больше не присоединяются к элементу DOM. Использование делегированных событий решит вашу проблему.

$('#myTable tr td.myCell').on('mouseenter',function(){alert('omg help'); }

$('#replaceThis').on('mouseenter', "#myTable tr td.myCell", function () {
    alert('omg help');
});