onclick标签查找函数的顺序？动态元素onclick报remove未定义排查

问题描述 #

JS放在独立文件中，已确保加载顺序在脚本之后且运行正常，但通过脚本动态生成带onclick的元素时，出现如下报错：

Uncaught ReferenceError: remove is not defined
at HTMLElement.onclick ((index):1:1)

灰色的(index)是我的HTML页面，不清楚报错里的橙色(index)是什么情况，想搞懂HTML的onclick()查找脚本函数的顺序，排查报错原因。

相关代码 #

HTML代码 #

<form method="post" action="{% url 'index' %}" class="form-div" onsubmit="return false;">
        <div class="wrapper">
            <div class="title">
                <i class='bx bx-palette' ></i>
              <h2>Interests</h2>
            </div>
            <div class="content">
              <p>Please enter your interests for improved suggestions</p>
              <ul><input id="input" class="input" type="text" spellcheck="false"></ul>
            </div>
            <div class="details">
                <p><span>10</span> tags are remaining</p>
              <button>Remove All</button>
            </div>
          </div>
        <button id="regbtn" type="submit" class="form-group btn btn-primary">Sign Up</button>
    </form>

JS代码 #

function createTag() {
    ul.querySelectorAll("li").forEach(li => li.remove());
    tags.slice().reverse().forEach(tag =>{
        let liTag = `<li>${tag} <i class="uit uit-multiply" onclick="remove(this, '${tag}')"></i></li>`;
        ul.insertAdjacentHTML("afterbegin", liTag);
    });
    countTags();
}

function remove(element, tag) {
    let index  = tags.indexOf(tag);
    tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
    element.parentElement.remove();
    countTags();
}

原因分析与解决方法 #

核心报错原因 #

1. 作用域不匹配：HTML内联onclick只能调用全局作用域的函数，如果你的remove函数是放在局部作用域里（比如被DOMContentLoaded回调、IIFE包裹），全局作用域就访问不到它，直接报错。
2. 橙色(index)的含义：这个是浏览器对动态生成的内联代码的定位标记，本质就是你通过insertAdjacentHTML生成的那行带onclick的<i>标签代码，浏览器把它当成了一个虚拟的代码源，不用纠结这个，重点还是函数作用域问题。

解决方案 #

方案1：将remove函数暴露到全局作用域

如果你的JS代码是在局部作用域内（比如常见的DOMContentLoaded回调里），把remove挂载到window对象上即可：

// 替换原来的remove函数定义
window.remove = function(element, tag) {
    let index  = tags.indexOf(tag);
    tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
    element.parentElement.remove();
    countTags();
}

方案2：使用事件委托（更推荐）

内联事件耦合性高，容易出作用域问题，换成事件委托更稳健：

1. 修改createTag中的HTML生成逻辑，去掉内联onclick，添加类名和自定义属性：

let liTag = `<li>${tag} <i class="uit uit-multiply remove-btn" data-tag="${tag}"></i></li>`;

2. 给父元素ul绑定事件委托，统一处理点击：

ul.addEventListener('click', function(e) {
    if(e.target.classList.contains('remove-btn')) {
        const tag = e.target.dataset.tag;
        let index = tags.indexOf(tag);
        tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
        e.target.parentElement.remove();
        countTags();
    }
});

补充：内联onclick的函数查找顺序 #

内联onclick里的代码是在全局作用域执行的，查找顺序就是从全局作用域开始找对应的函数/变量，找不到就直接抛出ReferenceError，所以只要函数不在全局作用域，内联onclick就访问不到。

内容的提问来源于stack exchange，提问作者Caden The Yak