javascript - jquery触发表行点击事件

Question

示例代码:

<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点击事件就可以了。

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

Goal: To get first the unitNo (processed on tr.bind click event) before processing the rest of the code on anchored link?

我尝试在 anchor 链接点击事件中复制 tr click 函数，但在 unitNo 上得到未定义值。看我的代码:

$('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/

Answer 1

更改:

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

致:

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

在 $('a[id^="unit_floor_plan_preview"]').bind('click' 中，您尝试在 "td.unitNumber span" 中查找 $(this)。问题是，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