如何使用jQuery实现表格整行点击触发隐藏提交按钮

现有一个由Flask传入JSON数据动态生成的HTML表格，每行包含一个隐藏的提交按钮，需要实现点击表格任意一行时，自动触发该行的提交按钮，仅使用jQuery完成。

解决方案 #

由于表格行是动态生成的，直接绑定点击事件会失效，必须使用事件委托来监听行的点击操作，确保新添加的行也能响应事件。

修改后的JavaScript代码 #

// 连接服务器
let socket = io.connect('/test');

$(function(){
    socket.emit('first_connect_event', {
        'first_message' : 'Hello World!'
    });

    socket.on('get_jobs_as_list', function (msg){
        let row_count = msg['rows'];
        let projects_json = $.parseJSON(msg['projects']);
        create_table(row_count, projects_json);
    });

    function create_table(row_count, json_users)
    {
        let table_body = $("#table1 tbody");
        table_body.empty();
        let markup = '';
        for(let i=0 ; i<row_count ; i++)
        {
            let buttonCaption = json_users[i]['unique_job_key']
            markup = "<tr>"
                    + "<td>" + json_users[i]['unique_job_key'] + "</td>"
                    + "<td>" + json_users[i]['user_name'] + "</td>"
                    + "<td>" + json_users[i]['protein_seq'] + "</td>"
                    + "<td>" + json_users[i]['is_done'] + "</td>"
                    + "<td>" + json_users[i]['created_at'] + "</td>"
                    + "<td style='display:none;'><input type='submit' name='submit_button1' value='"+buttonCaption+"'></td>"
                +"</tr>";
            table_body.append(markup);
        }
        return 99;
    }

    // 事件委托：监听tbody内所有tr的点击事件
    $('#table1 tbody').on('click', 'tr', function() {
        // 触发当前行内的隐藏提交按钮
        $(this).find('input[type="submit"]').trigger('click');
    });
});

关键说明 #

1. 事件委托原理：将点击事件绑定到页面加载时就存在的tbody元素上，而非动态生成的tr，这样后续添加的tr会自动继承事件监听。
2. 触发提交按钮：点击行时，通过$(this)获取当前行对象，再用find()定位到该行内的提交按钮，最后调用trigger('click')触发提交（和click()效果一致，语义更清晰）。

可选优化：添加可点击提示 #

为了让用户直观知道表格行可点击，可在CSS中添加鼠标样式：

#table1 tbody tr {
    cursor: pointer;
    transition: background-color 0.2s;
}

#table1 tbody tr:hover {
    background-color: #f5f5f5;
}

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