Обрабатывать всплывающие сообщения о событиях jquery при наведении на ячейку таблицы

Question

Я только начал накапливать события в jQuery, поэтому мое понимание очень ограничено. У меня есть требование обрабатывать все события, которые происходят в строке / ячейке таблицы (сетки) HTML на уровне родительского контейнера. Пример: 1. когда пользователь щелкает по строке, я хочу вместо привязки события щелчка к каждому привязывать его к родителю. 2. когда пользователь наводит курсор на ячейку, я хочу показать всплывающую подсказку, т.е. необходимо установить атрибут title для текстового элемента ячейки. Мне тоже нужно вспомнить это событие.

Я могу решить первую часть моего требования. Вот код для части 1 (jsFiddle добавлен ниже):

$('#grid').click(function(evt) {
    var row = $(evt.target).parent('tr'); // Get the parent row
    var cell= $(evt.target); //Get the cell
    alert('Row data: ' + row.text());
    alert('Cell data: ' + cell.text());
});

Я думал, что было бы просто реализовать hover тоже. Но я не могу отловить значение отдельной ячейки. Вот мой пример кода в скрипте jsFiddle: пример кода для всплытия события при наведении на ячейку

Кроме того, я заметил, что я вижу предупреждение дважды при наведении. Я предполагаю, что это вызывает событие один раз для ячейки, а затем для строки / таблицы. Точно сказать не могу?

Answer 1

Вы можете $.on чтобы достичь этого, как следующие. Начиная с jQuery 1.7 все вызовы .live(), .bind(),.delegate() использует .on() под капотом. А также .on связывает событие только на #grid и перехватить событие в этом элементе, а затем проверить, соответствует ли цель второму селектору. Если это так, то выполните функцию.

$('#grid').on('mouseenter','td', function(){
       console.log($(this).text());
   });​

Рабочая скрипка