javascript jquery 触发表格行点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17175369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery trigger table row click event
提问by Boyd
Sample Code:
示例代码：
<table class="grid">
<tr>
<td><a href="#" id="unit_floor_plan_preview">click me </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>
I am able to get the row index of the row selected to get the exact column data.
我能够获取所选行的行索引以获取确切的列数据。
tr = $('.grid').find('tr');
tr.bind('click', function(event) {
unitNo = $(this).find("td.unitNumber span").html();
alert(unitNo);
});
The above tr click event is fine.
上面的tr点击事件没问题。
My problemnow is how to trigger this tr binding event when clicking the anchor link <td><a href="#" id="unit_floor_plan_preview">Show map </a></td>within the table row?
我现在的问题是如何在单击<td><a href="#" id="unit_floor_plan_preview">Show map </a></td>表格行中的锚链接时触发此 tr 绑定事件？
Goal:To get first the
unitNo(processed on tr.bind click event) before processing the rest of the code on anchored link?
目标：在处理锚定链接上的其余代码之前首先获得
unitNo（在 tr.bind 单击事件上处理）？
I tried to duplicate the tr click function within the anchor link click event but got undefinedvalueon unitNo. See my code:
我试图在锚链接点击事件中复制 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);
});
test code:http://jsfiddle.net/VjkML/29/
测试代码：http : //jsfiddle.net/VjkML/29/
回答by SpYk3HH
Change:
改变：
unitNo = tr.find("td.unitNumber span").html();
To:
到：
unitNo = $(this).find("td.unitNumber span").html();
In $('a[id^="unit_floor_plan_preview"]').bind('click'You try to find "td.unitNumber span"within $(this). The problem is, thisrefers to the link clicked on, thus you'll never find anything!
在$('a[id^="unit_floor_plan_preview"]').bind('click'你试图找到"td.unitNumber span"内$(this)。问题是，this指的是点击的链接，因此你永远找不到任何东西！
FYI, you could easily rewrite that ENTIRE statement as follows:
仅供参考，您可以轻松地将整个语句重写如下：
$(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
例子
回答by Sushanth --
The best way is to bind the event only to your trand use the event.targetto check if it is tr or any other element that was clicked. This way your click event will not be duplicated.
最好的方法是只将事件绑定到您的tr并使用event.target来检查它是否是 tr 或任何其他被点击的元素。这样你的点击事件就不会重复。
This should work
这应该工作
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);
});
回答by j08691
Try:
尝试：
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);
});
With the link you need to go up the DOM to the row (via .closest()), then use .find()to go back down the same row to find the span you want to get the Unit value.
使用链接，您需要将 DOM 向上移动到行（通过.closest()），然后使用.find()向下返回同一行以找到要获取单位值的跨度。
