0

示例代码：

<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 上得到未定义的值。查看我的代码：

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

4

3 回答 3

4

改变：

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);
});

例子

于 2013-06-18T17:41:26.523 回答
0

最好的方法是将事件仅绑定到您的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);
});

检查小提琴

于 2013-06-18T17:43:00.610 回答
0

尝试：

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

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

于 2013-06-18T17:44:37.130 回答