Javascript 使用jQuery'；克隆人

因此，我正在使用electron进行一个项目，我需要能够在表格中显示数据，用户可以使用箭头键在表格中导航（例如）。在每个表中都会有一些复选框供用户进行选择，然后他会转到下一个表。最终，他有可能回到上一张桌子，在那里他所做的选择仍然会被保存。复选框有一些onclick函数，我希望能够将它们从一个表保存到另一个表

---

所以我想出了这段代码：

ipcRenderer.on('previousTable', (e) => {
    let $upper = $('#upper').clone(true);
    let $lower = $('#lower').clone(true);
    HTMLBuffer[index] = {
        'upper': $upper,
        'lower': $lower
    };
    $('#upper').empty();
    $('#lower').empty();
    index--;
    let previousTableData = allData.find(i => i == index);
    if (HTMLBuffer[index]) {
        $('#upper').html(HTMLBuffer[index].upper);
        $('#lower').html(HTMLBuffer[index].lower);
    } else {
        makeNewTable(previousTableData);
    }
})

“nextTable”事件也存在相同的情况

---

当显示第一个表时，会为每个复选框设置单击事件，当用户选中该复选框时，它会动态更改一些数字/颜色，当用户取消选中该复选框时，它会还原更改。 为此，我只使用一个简单的for循环：

checkboxes = tBodyUpper.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
    let checkbox = checkboxes[i];
    checkbox.onclick = function (event) {
        //some color/text changements
    }

复选框=tBodyUpper.getElementsByTagName（“输入”）；
对于（变量i=0；i

（请注意，我在这里没有使用jQuery，在我尝试使用jQuery之前，这部分代码就在那里，它最终会在以后更改）

---

问题是：当用户返回时，HTML代码被保存并完美显示，即使复选框保持选中状态，但onclick函数不会复制。。。 我对jQuery非常陌生（只有今天早上才知道具体的功能），因此非常感谢您的任何帮助！

这肯定是个问题。您在页面加载时运行附加单击处理程序。因此，当复选框被prev/next table函数“替换”时，附加的元素不再存在

您可以使用jQuery，因此可以这样尝试：

$(document).on("click","input:checkbox",function(){
  //some color/text changements
});

现在，处理程序被附加到

文档

，该文档“委托”了与选择器匹配的子对象上的操作（

.on（）

方法的第二个参数）

---

与其将其附加到

文档

，不如使用最接近的静态父选择器，如表容器。但您可以使用

文档

来测试我的解决方案。

您没有发布单击处理程序……但我很确定这是一个问题。感谢您的评论，我刚刚添加了一个点击处理程序的规划！你能告诉我更多关于这与委派的关系吗？也许我可以修改我的代码来考虑它？谢谢，它看起来像我想要的！不过还有一个问题：在函数中，如果我使用关键字

this

，它会引用“父级”吗（

document

在您的示例中）或触发事件的子级？否，函数中的

$（此）

将是与“defered to”选择器（第二个参数）匹配的单击元素。我不知道如何使用它，我尝试了

$（此）。选中了
，
$（此）。是（“：选中了”）
和
$（此）。prop(“checked”）
但是没有一个会给我true…
$（this）。prop（“checked”）
应该返回true/false…你可以把它作为一个条件：
如果（$（this）。prop（“checked”）{…
看到这个我不知道为什么，但在我的情况下，它返回
未定义的
…甚至是一个基本的“$”（'upper'）。on（'click'，'input:checkbox'，（）=>{console.log（$（this.prop（“checked”）；}）；`不起作用