[英]jquery trigger table row click event
样例代码:
<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>
我能够获取所选行的行索引以获取确切的列数据。
tr = $('.grid').find('tr');
tr.bind('click', function(event) {
unitNo = $(this).find("td.unitNumber span").html();
alert(unitNo);
});
上面的tr click事件很好。
现在我的问题是,如何在表行中单击锚链接<td><a href="#" id="unit_floor_plan_preview">Show map </a></td>
时触发此tr绑定事件?
目标: 要先获取
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/
更改:
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
是指单击的链接,因此您将永远找不到任何东西!
仅供参考,您可以按如下所示轻松重写ENTIRE语句:
$(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);
});
最好的方法是仅将事件绑定到您的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);
});
尝试:
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);
});
通过链接,您需要将DOM上移至该行(通过.closest()
),然后使用.find()
下移同一行,以查找要获取Unit值的范围。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.