javascript - 如何在 jQuery 中组契约(Contract)一个表上的两个不同的 onClick 事件？

Question

我有以下表结构:

<table id='myTable'>
    <tr>
       <th class='sort' field='ticket_id'>Ticket Number</th>
       <th class='sort' field='insert_date'>Insert Date</th>
    </tr>
    <tr class='data_row' ticket_id='123'>
       <td>123</td>
       <td>12-Aug-2014</td>
    </tr>
    ...
    ... so many other rows that are generated by code behind
    ...
</table>

我有以下 javascript 来处理 data_row 上的点击

$(document).on('click','#myTable tr',function(){
    var ticket_id = $(this).attr('ticket_id');
    get_details_about_ticket(ticket_id);  //this will call a function to display more details
});

如果用户单击某个<TH>，我还有以下代码来处理对表进行排序元素

$(document).on('click','#myTable.sort',function(){

    var field_id = $(this).attr('field_id');
    sort_table_by_field(field_id);  //this will call a function to re-generate the table 
                                    // with a different ORDER BY 
});

问题是只触发了一个事件。 <TR class='data_row'>再具体一点。我认为这可能是由于我试图听 <TH> 上的点击引起的同时在<TR>上这可能不合理，因为 <TH>包含在 <tr> 内所以我决定做以下事情来统一:

$(document).on('click','#myTable td',function(){
    var ticket_id = $(this).parent().attr('ticket_id');
    get_details_about_ticket(ticket_id);  
});

$(document).on('click','#myTable th',function(){
    var field_id = $(this).attr('field_id');
    sort_table_by_field(field_id);
});

但仍然只有 <td>点击事件被触发。

可能是什么原因，以及如何触发这两个事件来执行不同的任务？

Answer 1

如何在元素上仅触发一个函数 - 然后在触发的 javascript 函数中，获取元素类并在其中包含执行一个或多个函数的逻辑。

编辑:我编写了以下示例:

var myHandler = function () {
        if ($(this).is('td')) {
                console.log('found td');
        }
        if ($(this).is('th')) {
                console.log('found th');
        }
}
$(document).on('click', '#myTable td', myHandler);
$(document).on('click', '#myTable th', myHandler);

再次编辑以使示例更类似于您现有的代码。