javascript - 未定义 Uncaught ReferenceError

Question

我在这里错过了什么？

我在 html View 中有这个 javascript:

 sections.forEach(sec => {
    const li = jQuery(`<li>${sec.categoryName}<button type="button" onclick="
    if (confirm('Remove ${sec.categoryName}?')) removeSectionTapped(sec)"
        >Remove</button></li>`);
        jQuery('#Sections').append(li);
    });

function removeSectionTapped(sec) {
    console.log(sec)
}

在确认上按“确定”后，我收到此错误:未定义 Uncaught ReferenceError sec

sec 在确认消息中定义，但在 if 语句中没有定义。

Answer 1

您有两个名为 sec 的变量，它们都被声明为函数参数的名称，因此对于这些函数来说是本地变量。

您正尝试在 onclick 属性内使用变量。该属性不在这两个函数的内部(尽管生成该属性的 HTML 源代码在内部)，因此该变量在使用时超出了范围。

不要使用 onclick 属性，而是使用 JavaScript 绑定(bind)事件处理程序。

 sections.forEach(sec => {
    const li = jQuery("<li />");
    li.append(sec.categoryName);
    const button = jQuery('<button type="button" />');
    button.text("Remove")
    button.on("click", () => {
        if (confirm(`Remove ${sec.categoryName}?`)) {
            removeSectionTapped(sec);
        }
    });
    li.append(button);
    jQuery('#Sections').append(li);
});

function removeSectionTapped(sec) {
    console.log(sec)
}