我有以下标记(我无法控制,必须保持原样,但是可以操纵 JavaScript。)
我想要完成的是,当单击表格行时,会自动单击“Toggle Me Here”链接。
我一直发现我自己在当前设置下陷入了递归循环。
因此,单击表格行中的任何位置(减去实际单击链接本身)应该单击该链接,该链接将切换红色框。单击独立于表行的链接应正常切换红色框,而无需调用被触发的“selectedRow”单击事件。
我有以下标记(我无法控制,必须保持原样,但是可以操纵 JavaScript。)
我想要完成的是,当单击表格行时,会自动单击“Toggle Me Here”链接。
我一直发现我自己在当前设置下陷入了递归循环。
因此,单击表格行中的任何位置(减去实际单击链接本身)应该单击该链接,该链接将切换红色框。单击独立于表行的链接应正常切换红色框,而无需调用被触发的“selectedRow”单击事件。
免责声明,以下答案不是最佳解决方案。如果可能的话,使用不显眼的处理程序使用@karim的解决方案。
如果他的解决方案不是一个选项,例如这个链接是由某些东西自动生成的,那么你可以这样做:
$(function() {
$('.selectedRow').click(function(e) {
if(e.target.nodeName != 'A')
$(this).find('td:last a').click();
});
});
你可以在这里测试它,它只是检查点击不是来自锚点。如果是这种情况,它已经完成了它需要做的事情,click
冒泡到该行的事件应该不采取任何行动。
正在发生的事情(我认为)是,当您单击锚点时,事件会冒泡并触发绑定到行的事件。我建议按如下方式绑定到锚点:
$('.toggleMe').click(function(e) {
e.stopPropagation(); // prevent event from bubbling up the DOM tree
$("#box").toggle();
});
此外,从锚点中删除内联函数调用,并给它类.toggleMe
等(在上面的点击处理程序中使用):
<a class="toggleMe" href="#">Toggle Me Here</a>
在这里试试:http: //jsbin.com/uyifu3/7/edit(点击锚点不会触发.selectedRow
点击事件,我添加了一个警报)。
$('tr').click(function(){
$('#box').toggle();
});
并且只需删除任何功能,toggleMe()
以便从本质上单击链接与单击行没有什么不同。它只是为了展示:)
尝试退回到一个共同的父级(本示例中的 row/tr),然后向下钻取到目标(带有 onclick 处理程序)。
$(e.target).parents('tr').first().find('td:last a').click();
我假设有不止一行(因为你正在使用一个类TR
)。此代码将为您工作:
$(document).ready(function(){
// Remove the anchors
$(".selectedRow td:last a").each(function(){
$(this).replaceWith($(this).html());
});
// Make entire row clickable
$(".selectedRow").click(function(e){
$('#box').toggle();
});
});
本质上,它删除了toggleMe()
锚点并使整行可点击。
这是实际代码。