jQuery循环拼接HTML时如何正确将变量值传入onclick事件方法

当前写法存在两个会导致传值失效的本质问题：

• 拼接HTML字符串时，onclick属性内的代码是纯文本内容，不会在循环阶段就把selected_files[i].name的实际值替换进去。等页面渲染完成、用户触发点击事件时，循环中的变量i已经走到循环结束后的终值（即selected_files.length），既容易触发数组越界，也根本匹配不到循环每一步对应的文件对象；你看到打印内容为字符串字面量的现象，正是这个环节变量解析失效导致的。
• 如果selected_files是局部作用域定义的变量，根本无法被全局作用域下的内联onclick事件访问到，自然拿不到正确的参数值。

方案1：拼接字符串时直接嵌入变量实际值 #

在循环每一步先取出当前的文件名称，将实际值直接嵌入onclick的参数位置，不要把变量的代码引用直接写进字符串里：

for (var i = 0; i < selected_files.length; ++i) {
    // 取当前循环步的实际文件名
    const fileName = selected_files[i].name;
    // 拼接时直接把文件名作为参数嵌入，注意转义单引号避免字符串截断
    children += '<div class="del" onclick="removeImageFromList(\'' + fileName.replace(/'/g, "\\'") + '\')">X</div>' + fileName + '<br>';
}

注意：这种写法需要手动处理特殊字符转义，如果文件名包含单引号、尖括号等特殊字符，很容易出现属性截断、HTML注入的问题。

方案2：使用jQuery事件绑定替代内联onclick（更推荐） #

既然项目已经引入了jQuery，完全不需要依赖内联onclick绑定事件，通过data属性存储参数、配合事件委托实现，从根源上规避作用域、闭包、转义的问题：

// 循环拼接DOM时，仅把文件名存在自定义data属性里，不写内联事件
for (var i = 0; i < selected_files.length; ++i) {
    const fileName = selected_files[i].name;
    children += '<div class="del" data-file-name="' + fileName + '">X</div>' + fileName + '<br>';
}
// 内容挂载到页面后，通过事件委托绑定删除逻辑
$('你的列表容器选择器').on('click', '.del', function() {
    // 从DOM的data属性中取出对应文件名
    const targetFileName = $(this).data('fileName');
    removeImageFromList(targetFileName);
});

这种实现的优势：

• 不需要把JS逻辑硬编码在HTML字符串里，代码结构更清晰
• 不存在作用域隔离、循环闭包导致的变量值错乱问题，不管selected_files是全局还是局部定义的变量都能正常工作
• 减少特殊字符转义的出错概率，只需要保证文件名能安全写入DOM属性即可

内容的提问来源于stack exchange，提问作者Benjamin Donnaloia