动态创建按钮后点击均返回最后一个Job ID结果的问题求助

问题根源 #

这是典型的闭包作用域陷阱：你在循环中用var声明了button_results变量，var的作用域是函数级而非块级，所有循环迭代共享同一个button_results引用。当循环结束后，这个变量指向最后一个创建的按钮，所以无论点击哪个按钮，事件回调里的button_results都是最后那个按钮的实例，自然只会请求最后一个Job ID的结果。

修复方案 #

方案1：用let替代var声明按钮变量

利用let的块级作用域特性，每次循环都会创建独立的变量绑定，确保每个事件回调引用当前迭代的按钮：

let button_results = document.createElement("button");
button_results.innerText = 'view results';
button_results.value = jobs_data[i]["ID"];
button_results.addEventListener("click", function(){
    getResults(this); // 直接传当前点击的按钮，更稳妥
}, false);

方案2：用this获取当前触发事件的按钮

事件回调中this指向当前被点击的按钮，直接用this替代外部变量，彻底避开闭包引用问题：

var button_results = document.createElement("button");
button_results.innerText = 'view results';
button_results.value = jobs_data[i]["ID"];
button_results.addEventListener("click", function(){
    getResults(this);
}, false);

方案3：立即执行函数（IIFE）封装作用域

如果需要兼容不支持let的旧环境，用IIFE为每个按钮创建独立作用域：

var button_results = document.createElement("button");
button_results.innerText = 'view results';
button_results.value = jobs_data[i]["ID"];
(function(btn) {
    btn.addEventListener("click", function(){
        getResults(btn);
    }, false);
})(button_results);

额外优化建议 #

1. 避免全局变量：ldata未用let/const声明，会变成全局变量，建议修改为：

   const ldata = jdata["result"]
   

2. 避免重复绑定事件：每次点击按钮都给close_btn添加监听，多次点击后会触发多次关闭逻辑，建议把关闭事件移到弹窗初始化时只绑定一次，或者使用once选项：

   close_btn.addEventListener('click', hide_popup_in_results, { once: true });
   

内容的提问来源于stack exchange，提问作者Akshay J