Question

所以我正在开发一个带电子的项目，我需要能够在表格中显示数据，用户可以使用ArrowKeys（例如）浏览表格。在每个表中都会有一些复选框供用户做出一些选择，然后他会转到下一个表。最终，他可能会回到上一个表格，在那里他的选择仍然会被保存。复选框有一些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);
    }
})

＆＃39; nextTable＆＃39;同样存在。事件

当显示第一个表时，为每个复选框设置click事件，当用户选中该框时，它会动态更改某些数字/颜色，并在取消选中时恢复更改。为此，我只使用一个简单的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
    }

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

问题是：HTML代码保存并在用户返回时完美显示，即使选中的复选框仍然处于选中状态，但onclick功能只是不会复制... 我对jQuery很新（只有今天早上tbh，对于那个特定的功能）所以任何帮助都会非常感激！

Answer 1

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

你使用jQuery，所以试试这样：

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

现在，处理程序附加到document，它“委托”与子选择器相匹配的操作（.on()方法的第二个参数）。

最好使用最近的静态父选择器...而不是将其附加到document，就像表容器一样。但您可以使用document来测试我的解决方案。

使用jQuery＆lt; sclone（）保持复选框onclick功能

1 个答案: