дескриптор события 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()); 
}); 

Я думал, что это было бы просто реализовать парить тоже. Но я не могу уловить ценность отдельной ячейки. Вот мой пример кода в скрипте jsFiddle: sample code to bubble the event on cell hover

также, я заметил, что дважды вижу предупреждение при наведении указателя мыши. Думаю, он поднимает событие один раз для ячейки, а затем для строки/таблицы. Не уверен?

Answer 1

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

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

Working Fiddle