Bootstrap 数据表 tr 不会触发 onclick

Question

请参阅此处的示例： http: //jsfiddle.net/c0kackzw/

一个表是这样的：

<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>

当您单击第一页上的某一行时，单击功能可以工作，但当您在其他页面上时，单击功能不起作用：

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

并且所有行都有reportRow 类。如果我将 onclick='myFunc' 添加到所有 tr 中，它就可以工作。但我不想用那个。我怎样才能让另一种方式发挥作用？

Answer 1

使用事件委托：它将在动态元素上应用事件。

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

参考： http: //api.jquery.com/on/

演示： http: //jsfiddle.net/c0kackzw/1/