Bootstrap data table tr doesn't fire onclick

Please refer to example here: http://ift.tt/1DJW7Qi

A table goes like 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 you click a row on the first page, click function works but it doesn't work when you are on the other pages:

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

and all rows has reportRow class. If i add onclick='myFunc' to all tr s it works. But I don't want to use that. How to I make the other way work?