Question

I have just started on event bubbling in jQuery so my understanding is very limited. I have a requirement to handle all the events that happen on the html table (grid) row/cells on parent container level. Example:
1. when the user click on a row, I want instead of binding click event to each I bind it to the parent .
2. when user hover over a cell, I want to show the tooltip i.e. need to set the title attribute to the text element of the cell. I need to bubble this event too.

I am able to solve the first part of my requirement. Here is the code for part 1 (jsFiddle added below):

$('#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());
});

I thought it would be simple to implement hover too. But I am not able to trap the individual cell value. Here is my sample code in fiddle jsFiddle: sample code to bubble the event on cell hover

also, I noticed that I see alert twice on hover. I guess it is raising the event once for the cell and then for the row/table. Not sure?

Answer 1

You can $.on to achieve this like following. As of jQuery 1.7 all calls to .live(), .bind(), ‘.delegate()’ uses .on() under the hood. And .on binds the event only on #grid and intercept the event on that element and then check if the target mactches the second selector. If so then execute the function.

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

Working Fiddle