I often use the jQuery datatables plugin when I want a dynamic table that includes sorting as well as next and previous functionality. I mistakenly thought I could just tie my hover and click events to each row in the table as follows:
$('#speaker-archive-table tbody tr').hover(this.hoverRow, this.hoverRow); $('#speaker-archive-table tbody tr').on('click', this.selectRow);
The above worked great on the first page, but when I clicked “next”, nothing happened! This is because those table rows don’t exist yet. The solution is to use event delegation which ties the event to the tbody, which does exist but triggers the event on the table row (<tr>). To learn more about event delegation with jQuery, see https://api.jquery.com/on/.
$( '#speaker-archive-table tbody' ).on( 'mouseenter mouseleave', 'tr', this.hoverRow ); $('#speaker-archive-table tbody').on('click', 'tr', this.selectRow);
You can see the events in action on this website: http://bbrc.net/speakers/