Javascript 如何使用jQuery触发表内的按钮？

当用户单击

标记对象时，我试图触发一个按钮（在我的一个表中），如下所示：

$（文档）.ready（函数（）{
$（'body'）。在（'click'，'tr'，function（）上{
var tridx=$（this）.data（'track-id'）；
$（'td div#play'+tridx）。单击（）；
});
});

身份证件
艺术家
标题
体裁
期间
释放
1.
西蒙·德奥罗
1.
1.
3:47
2016-12-06
问题在于函数调用（处理
单击事件）正在递归

jQuery的
.on（…）
正在捕获指定选择器（
tr
在您的示例中）及其下的所有内容的单击事件。因此，
tr
中按钮的
单击
事件也会触发您定义的匿名函数

在您的场景中，这是不可取的，因为用户的单击会触发另一个
单击
事件，触发另一个
单击
事件，依此类推

从函数内部对函数的每次调用都会在调用堆栈上生成一个新的条目，该条目最终会变得太大而崩溃。（这就是你看到的症状。）堆栈只有在函数实际返回时才会收缩。。。（这对你来说永远不会发生）

有多种方法可以避免此问题。可能最简单：忘记在按钮本身上有一个点击处理程序（因为按钮的点击触发了包含
tr
click事件）

或者，您可以告诉jQuery停止在DOM树上应用click事件

引用有关此主题的jQuery文档：

默认情况下，大多数事件从原始事件目标冒泡到
文档元素

在过程中的每个元素上，jQuery都调用
匹配已附加的事件处理程序。处理程序可以防止
防止事件在文档树上进一步冒泡（从而防止
通过调用
event.stopPropagation（）

当前服务器上附加的任何其他处理程序
元素将运行

要防止这种情况，请致电
event.stopImmediatePropagation（）
。（绑定到元素的事件处理程序）
按绑定顺序调用。）

引用：


在一个半相关的方面，我强烈建议以一种尽可能清晰地区分事件处理程序、私有方法和公共方法的方式构造jQuery代码。关于如何做到这一点，有各种各样的“建议”（我当然不能说标准！）——我个人最喜欢的是：

使用此方法，我为所有UI代码创建一个“名称空间”（假设它只是一个小的代码库），并有一个“设置”函数（由
onReady
调用），该函数将所有事件处理程序连接到它们的相关选择器。这些事件处理程序尽可能少，主要调用包含真实逻辑的私有函数

出于个人喜好，我尽量避免匿名函数。我将引用附加到函数


在一个半相关的注释中。。。如果您还没有，我强烈建议您掌握浏览器的开发工具。（我个人最喜欢的是带有镀铬的。）

具体查看断点，学习如何在使用手表时逐行执行操作（以及函数的进出）

例如：
正如我在评论中提到的，原因是递归地在同一TR内的元素上生成一个click事件

单击播放按钮之前，只需检查单击事件不是来自播放按钮：

$(document).ready(function(){
  $('body').on('click', 'tr', function(e){
    var tridx = $(this).data('track-id');
    var $button = $('td div#play'+tridx);
    if (!$button.is(e.target))
    {
        $button.click();
    }
  });
});

$（'td div#play'+tridx）。单击（）？？@PraveenKumar我还尝试了一个简单的
$（“#play”+tridx）
但当您使用
$（'td div#play'+tridx）时，它不起作用事件正在传播到
tr
，似乎您陷入了持续的loop@nashcheez：这是非常错误的，它是不正确的：）TRs的数量不会导致此问题。递归生成的事件确实如此。@Philantrovet:这与
$（this）相同。数据（'track-id'）
@SimonLeCat:其他选项包括使用sentinel标志，但这是最简单的。欢迎使用。我添加了一个关于结构化代码的注释。。。这与回答你的问题并不相关，但我保证，如果你现在就开始，在中长期内你会有更好的体验。匿名函数可能会成为调试的麻烦，特别是在这种情况下。如果您还不熟悉它，我还将掌握如何使用浏览器的开发人员工具设置调试断点以逐行执行。