【问题标题】：jquery trigger table row click eventjquery触发表格行点击事件
【发布时间】：2013-06-19 20:23:47
【问题描述】：

示例代码：

<table class="grid">
    <tr>
        <td><a href="#" id="unit_floor_plan_preview">click me &nbsp;</a></td>
        <td class="unitNumber"><span>Unit 1</span></td>
        <td class="unitStatus">Open</td>
    </tr><tr>
        <td class="unitNumber"><span>Unit 2</span></td>
        <td class="unitStatus">Sold</td>
    </tr>
</table>

我能够获取所选行的行索引以获取确切的列数据。

tr = $('.grid').find('tr');

tr.bind('click', function(event) {

    unitNo = $(this).find("td.unitNumber span").html(); 
    alert(unitNo);


});

上面的tr点击事件没问题。

我的问题现在是如何在点击表格行内的锚链接<td><a href="#" id="unit_floor_plan_preview">Show map &nbsp;</a></td>时触发这个tr绑定事件？

目标： 在处理锚定链接上的其余代码之前先获取unitNo（在 tr.bind 点击事件上处理）？

我尝试在锚链接点击事件中复制 tr 点击函数，但在 unitNo 上得到 undefined 值。查看我的代码：

$('a[id^="unit_floor_plan_preview"]').bind('click',function() {
    var tr = $('.grid').find('tr');
    unitNo = $(this).find("td.unitNumber span").html();  

    alert('From link: ' + unitNo);

});

测试代码： http://jsfiddle.net/VjkML/29/

【问题讨论】：

这里的问题是事件冒泡的操作顺序。链接将始终出现在行点击之前。

标签： javascript jquery

【解决方案1】：

变化：

unitNo = tr.find("td.unitNumber span").html();

收件人：

unitNo = $(this).find("td.unitNumber span").html();

在$('a[id^="unit_floor_plan_preview"]').bind('click' 中，您尝试在$(this) 中找到"td.unitNumber span"。问题是，this 指的是点击的链接，所以你永远找不到任何东西！

仅供参考，您可以轻松地将整个语句重写如下：

$(document).on("click", '.grid tr, a[id^="unit_floor_plan_preview"]', function(e) {
    e.stopPropagation(); // will prevent double click events from link being clicked within row
    var unitNo = $.trim($(this).closest("tr").find(".unitNumber span").text()); // trim to remove end space, closest gets closest parent of selected type
    if (e.target.tagName == "A") alert('From link: ' + unitNo);
    else alert(unitNo);
});

Example

【讨论】：

【解决方案2】：

最好的方法是将事件仅绑定到您的tr 并使用event.target 检查它是否是 tr 或任何其他被点击的元素。这样你的点击事件就不会重复了。

这应该可行

var unitNo;
var tr;

tr = $('.grid').find('tr');
tr.bind('click', function (event) {

    if ($(event.target).is('tr')) {
        // If it is a tr that is clicked then just use find
        unitNo = $(this).find("td.unitNumber span").html();
    } else {
        // If not tr find the closest tr and then find the element
        unitNo = $(this).closest('tr').find("td.unitNumber span").html();
    }
    alert(unitNo);
});

Check Fiddle

【讨论】：

【解决方案3】：

试试：

var unitNo;
var tr = $('.grid').find('tr');
$('a[id^="unit_floor_plan_preview"]').on('click',function(e) {
    e.stopPropagation();
    unitNo = $(this).closest('tr').find("td.unitNumber span").html();  
    alert('From link: ' + unitNo);
});
tr.on('click', function(event) {
    unitNo = $(this).find("td.unitNumber span").html(); 
    alert(unitNo);
});

jsFiddle example

使用该链接，您需要将 DOM 向上移动到该行（通过 .closest()），然后使用 .find() 向下返回同一行以找到您想要获取 Unit 值的跨度。

【讨论】：