在For循环中为点击功能分配JQuery

Posted 2021-04-20

我有一个函数，根据给定的输入动态创建div元素，并让他们通过单击每个div选择某些项目。我有它，所以如果单击div，会调用一个函数（名为checkToggle），使其看起来像是被选中并调整一些相关变量。 div元素中有一个由此函数切换的复选框（因此其名称）。长话短说，我不得不跳过一些箍来让它发挥作用，其中大多数我甚至都不记得了。请不要问我这个问题。

这个问题的关键是这个。我最初使用以下javascript代码在单击复选框时运行该函数。它由main函数分配，它使用for循环创建这些div元素。

document.getElementById(`${itemID}-checkbox`).onclick = function() {
    checkToggle(`${itemID}-checkbox`);
};

这有效，但我想尝试将所有的onClick函数转换为JQuery。这是我创建的JQuery替代方案。

$(`${itemID}-checkbox`).on(`click`, function() {
    checkToggle(`${itemID}-checkbox`);
});

虽然代码本身似乎很好，但它不起作用。看起来似乎无法在for循环或类似的东西中创建这样的JQuery函数。它是在创建元素并将其放置到位后应用的，因此我认为它与未准备好的元素有任何关系。我也遇到了与其他2个类似案件相同的问题。任何想法为什么这不起作用？

如果需要更多信息，请告诉我，如果需要，需要哪些信息。

答案

您需要使用#字符将选择器更新为Target html id。只需将字符添加到查询中：

$(`#${itemID}-checkbox`).on(`click`, function() { checkToggle(`${itemID}-checkbox`); });

它也适用于DOM方法querySelector或querySelectorAll。

希望这有帮助！