示例代碼：jQuery的觸發器錶行單擊事件

<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 click事件沒有問題。

我的問題現在是如何觸發此tr綁定事件時，單擊錶鏈內的錨鏈接<td><a href="#" id="unit_floor_plan_preview">Show map  </a></td>？

目標： 要獲得第一unitNo處理上錨鏈接的代碼的其餘部分之前（上tr.bind click事件處理）？

我試圖錨鏈接點擊事件中複製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/

來源

2013-06-18 Boyd

這裏的問題是來自事件冒泡的操作順序。該鏈接將始終在行點擊之前出現。 – epascarello

變化：

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"瓦特ithin $(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

來源

2013-06-18 17:41:26 SpYk3HH

，最好的辦法是將事件僅綁定您的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

來源

2013-06-18 17:43:00

嘗試：

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

在TH技術您需要將DOM上傳到該行（通過.closest()），然後使用.find()返回同一行以找到想要獲取單位值的範圍。

來源

2013-06-18 17:44:37 j08691

jQuery的觸發器錶行單擊事件

回答

Example

相關問題