javascript - Bootstrap data table tr doesn't fire onclick -

please refer example here: http://jsfiddle.net/c0kackzw/

a table goes this:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example"> <thead>     <tr>         <th>rendering engine</th>         <th>browser</th>         <th>platform(s)</th>         <th>engine version</th>         <th>css grade</th>     </tr> </thead> <tbody>     <tr class="reportrow odd gradex">         <td>trident</td>         <td>internet              explorer 4.0</td>         <td>win 95+</td>         <td class="center"> 4</td>         <td class="center">x</td>     </tr> 

when click row on first page, click function works doesn't work when on other pages:

$('.reportrow').click(function(){ alert('mm'); }); 

and rows has reportrow class. if add onclick='myfunc' tr s works. don't want use that. how make other way work?

use event delegation: apply event on dynamic elements.

$('#example').on('click', '.reportrow', function () {     alert('mm'); }); 

ref: http://api.jquery.com/on/

demo: http://jsfiddle.net/c0kackzw/1/