jQuery toggleClass на столе не работает

Question

Я пытаюсь выделить строку таблицы, когда мышь на нее нависает. Поэтому я использую функцию jQuery toggleClass(). Стоит отметить, что строки таблицы изначально не существуют, они создаются после вызова AJAX на сервер и затем вставляются в таблицу. Строки таблицы, которые создаются, имеют класс = "table_row". Вот мой код ...

$('.table_row').hover(function() { 
    event.preventDefault(); 
    $(this).toggleClass('highlighted'); 
}); 

По какой-то причине это не сработает, ничего не происходит. Строка не будет реагировать на какие-либо события. Вот код, я использую для создания элементов таблицы, и это происходит до того кода выше ...

$('tbody').prepend(
    '<tr class="table_row"><td>' + results + '</td></tr>' 
}); 

Answer 1

Попробуйте использовать:

$('tbody').on('mouseenter mouseleave', '.table_row', function() { 
    $(this).toggleClass('highlighted'); 
}); 

Это использует .on() установить обработчик события для всех существующих и будущих .table_row элементов. .hover() связывает обработчики как для mouseenter, так и для mouseleave событий, поэтому это будет работать так же, как и .hover().

Вы также можете рассмотреть использование псевдокласс класса CSS :hover. Однако это может быть не то, что вы ищете, если вам нужно повторно использовать класс .highlighted. Вот пример:

tbody > tr.table_row{ /* regular styles */} 
tbody > tr.table_row:hover{ 
    // the current styles you have in .highlighted 
} 

Answer 2

Попробуйте использовать делегирование событий для динамически создаваемых элементов. Событие hover привязано только к элементу, который существует в этот момент времени, поскольку вы добавляете его во время выполнения, вам нужно либо связать событие снова для вновь добавленных строк, либо использовать eventdelegation, чтобы ваш контейнер делегировал событие динамическому строки, когда они доступны.

$('yourtableselector').on('mouseenter mouseleave', '.table_row', function() { 
    $(this).toggleClass('highlighted'); 
}); 

event-delegation

hover является виртуальное событие для комбинации mouseenter/mouseleave.

Demo

Answer 3

Используйте CSS вместо JavaScript для простых изменений стиля на события парения.

#my_table > tbody > tr:hover { 
    background: yellow; 
} 

---

Но если вы действительно использовали JavaScript, я бы предложил создать элемент, и привязки непосредственно к нему.

Поскольку события наведения происходят так часто, как мышь перемещается, я хочу, чтобы обработчик был как можно ближе к элементу.

$('<tr class="table_row"><td>' + results + '</td></tr>') 
    .hover(function() { 
     event.preventDefault(); 
     $(this).toggleClass('highlighted'); 
    }) 
    .appendTo("tbody");