点击表格行触发行内按钮点击并高亮，遇栈溢出错误求助

这个错误Uncaught RangeError: Maximum call stack size exceeded是因为事件冒泡引发的无限循环触发，我来给你拆解原因和修复方案：

问题根源 #

你的代码里，点击<tr>时会执行$('button[name="checkbtn"]').click()，这会触发页面上所有name为checkbtn的按钮点击事件。而按钮本身就在<tr>内部，按钮的点击事件会向上冒泡到父元素<tr>，又会触发<tr>的点击事件——这样循环往复，直接把调用栈撑爆了。同时，全局选择按钮也不符合你"仅触发当前行按钮"的需求。

修正方案 #

我推荐两种更可靠的实现方式，你可以根据需求选择：

方案1：直接提交当前行的表单（更高效）

既然按钮是表单的提交按钮，我们可以直接找到当前行内的表单并提交，跳过触发按钮点击的步骤，从根源避免冒泡问题：

$(".table tr").on('click', function(event) {
    // 排除点击按钮或表单隐藏域的情况，避免重复触发逻辑
    if ($(event.target).is('button, input[type="hidden"]')) {
        return;
    }
    
    // 切换行的高亮样式
    $(this).toggleClass('highlighttask');
    // 提交当前行内的表单
    $(this).find('form').submit();
});

方案2：触发当前行按钮点击并阻止冒泡

如果你确实需要触发按钮的点击事件（比如按钮绑定了其他自定义逻辑），可以这样做：

$(".table tr").on('click', function(event) {
    // 排除直接点击按钮的情况
    if ($(event.target).is('button')) {
        return;
    }
    
    $(this).toggleClass('highlighttask');
    // 只触发当前行内的按钮点击，并传递标记区分触发来源
    $(this).find('button[name="checkbtn"]').trigger('click', ['fromRowClick']);
});

// 给按钮绑定事件，处理来自行点击的触发
$('button[name="checkbtn"]').on('click', function(event, source) {
    // 如果是来自行的触发，阻止事件冒泡到tr，避免循环
    if (source === 'fromRowClick') {
        event.stopPropagation();
    }
    // 按钮原本的提交逻辑会自动执行，无需额外处理
});

额外注意点 #

• 必须用$(this).find()定位当前行内的元素，而不是全局选择器，这样才不会误操作其他行的按钮。
• 通过event.target判断点击源，可以避免用户直接点击按钮时，重复执行行的高亮和提交逻辑。

内容的提问来源于stack exchange，提问作者Timebreaker900