Chrome 捕获错误目标的弹出窗口中的扩展单击事件处理程序

Question

在我的扩展程序中，我正在尝试制作一堆按钮。每个数字都是一个按钮，因此 table 中的所有单元格除了 header "Save" 和 "Load".

[![在此处输入图片描述][1]][1] 所以我的目标是 20 个按钮，左侧的 1-9（和 0）执行保存操作，另外 10 个按钮用于加载。我为每个按钮制作了点击处理程序并动态生成 table。
这是从我的弹出窗口 html 页面

链接的脚本中相关代码的一部分

$(document).ready(populateGroupButtons)

function populateGroupButtons(){
    const groups=[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]     //group 0 is at the end
    let table=$('#groupButtons')
    groups.forEach((group)=>{
            table.append(
            '<tr>'+
                '<td id="save'+group+'">'+
                    group+
                '</td>'+
                '<td id="load'+group+'">'+
                    group+
                '</td>'+
            '</tr>'
        )
    })

    $(document).ready(registerClickHandlers)
}

function registerClickHandlers(){
    let table = $('#groupButtons')
    for(let group=0; group<=9; group++){
        $('#save'+group).click((e)=>{
            console.log($('#save'+group))
        });
        $('#load'+group).click((e)=>{
            console.log($('#load'+group))
        })
    }
}

弹出html页面

<!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='jquery-min.js'></script>
    <link href='css/style.css' type='text/css' rel="stylesheet">
</head>
<body>
    <h1>Popup</h1>
    <table id='groupButtons'>
        <tr>
            <th>Save</th>
            <th>Load</th>
        </tr>
    </table>
    <p>Open console to see output</p>
    <script type='text/javascript' src='popup-script.js'></script>
</body>
</html>

如果我在新标签页中查看 popup.html 并且 it also works here isolated as a jsfiddle
，我可以使用它 问题是当我将它用作 chrome 扩展时，我单击的 table 单元格不是事件处理程序的正确目标

现在我只是将目标登录到控制台以查看发生了什么（我想让按钮稍后实际执行操作）
当我单击“保存”列中的 1 时，它会记录 #save2
当我点击保存列中的 2 时，它会记录 #save3
当我单击包含单词 "Save" 的 <th> 时，它会记录 #save1
第 9 行和第 0 行在单击时没有响应，因此似乎没有事件处理程序

基本上，所有内容都向上移动了 1 行，我不知道为什么
它在纯 JavaScript 和 fiddle 上工作正常，但不知何故目标是错误的

Here's a zip folder of the entire extension

编辑：问题截图
看看当我单击 "Save" 单元格时会发生什么。
它甚至不应该是一个按钮，因为这是一个 <th> 元素，但它以某种方式记录了一次点击。
另请注意，它会记录 td#save1，即使我单击的位置在上方 <td> 实际记录的
在第 8 行之后，他们甚至没有注册点击

Answer 1

我终于找到了一个事实，即我在我的笔记本电脑主屏幕上启用了 125% 缩放，但不知何故它没有在我的外部显示器上启用。（我最近买了新显示器，也许当我连接新显示器时该设置没有转移）。 全部设为 125% 或设为全部 100% 可以解决问题。

这似乎是一个边缘案例，并不是 Chrome 的错，但这是我唯一一次遇到多个显示器的问题。我想只是需要注意一些事情。

Chrome 捕获错误目标的弹出窗口中的扩展单击事件处理程序

Chrome Extension click event handlers in popup capturing wrong target

javascript

jquery

dynamic-content

google-chrome-extension