<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html" order="1">

<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />

<title>DOM / jQuery events</title>
<js><![CDATA[

$(document).ready(function() {
	var table = $('#example').DataTable();
	
	$('#example tbody').on('click', 'tr', function () {
		var data = table.row( this ).data();
		alert( 'You clicked on '+data[0]+'\'s row' );
	} );
} );

]]></js>

<info><![CDATA[

Events assigned to the table can be exceptionally useful for user interaction, however you must be aware that DataTables will add and remove rows from the DOM as they are needed (i.e. when paging only the visible elements are actually available in the DOM). As such, this can lead to the odd hiccup when working with events.

One of the best ways of dealing with this is through the use of delegated events with jQuery's `on` method, as shown in this example. This example also uses the DataTables `dt-api row().data()` method to retrieve information about the selected row - the row's data so we can show it in the `alert` message in this case.

]]></info>

</dt-example>
