Question

我创建了一个委托，它响应HTML表格中的行单击。但是，如果用户单击表标题行，我希望此委托不会触发。我可以轻松修改委托定义吗？

$("#listingTable").delegate('tr', 'click', function () {
var latitude = $(this).children('td').eq(3).text().trim();
var longitude = $(this).children('td').eq(4).text().trim();

Answer 1

将类添加到您不想要的tr中：

<tr class="ignore"><td>Nope</td></tr>
<tr><td>Yes</td></tr>

$("#listingTable").delegate('tr:not(.ignore)', 'click', function () { /* ... */})

或使用桌子身体：

<table>
<thead>
    <tr><th>exampleheader</th></tr>
</thead>
<tbody>
    <tr><td>Only this</td></tr>
</tbody>
</table>

$("#listingTable").delegate('tbody>tr', 'click', function () { /* ... */})

或者全部使用html5：

<tr data-lat="123" data-lng="456"><td>Some td's value</td></tr>

$("#listingTable").delegate('tr', 'click', function () {
    if( typeof $(this).attr('data-lat') !=="undefined" ){

     }
})

Answer 2

我的回答是基于OP使用<th>元素的假设。还在等待OP发布他的标记。

如果事件源自<tr>而不是<th>元素，则可以阻止事件冒泡/传播到<td>元素：

$('#listingTable').on('click', 'tr', function () {
    var latitude = $(this).children('td').eq(3).text().trim();
    var longitude = $(this).children('td').eq(4).text().trim();
}).on('click', 'th', function(e) {
    e.stopPropagation();
});

p / s：如果您使用的是较新版本的jQuery，我建议您从.delegate()迁移到.on()。

这是一个概念验证JSFiddle：http://jsfiddle.net/teddyrised/27Twe/

Answer 3

尝试在<tbody>

中使用tr

 <table id="myTable">
        <thead>
            <tr>
                <th>Title</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>Cell1</td></tr>
            <tr><td>Cell2</td></tr>
        </tbody>
    </table>


$("#myTable").delegate('tbody tr', 'click', function () {});

jQuery - 委托，忽略标题行

3 个答案: