JavaScript动态按钮onClick事件（变量作用域）及AJAX调用问题咨询

这是动态生成元素时非常常见的作用域陷阱——循环里绑定事件时，变量会共享同一个作用域，导致所有按钮点击后都用最后一次循环的变量值。下面给你几个实用的解决方案：

1. 用ES6的let（块级作用域） #

这是最简洁的方案，let会在每次循环时创建一个独立的块级作用域，把当前循环的变量值“固定”下来：

// 假设你已经拿到了从api/获取的foo列表数据
const fooList = ['book', 'movie', 'music'];

fooList.forEach(foo => {
  const button = document.createElement('button');
  button.textContent = `选择${foo}`;
  
  button.onclick = () => {
    // 这里的foo就是当前循环的那个值，不会被后续循环覆盖
    fetch(`api/${foo}/`)
      .then(res => res.json())
      .then(barList => {
        // 生成bar按钮的逻辑...
      });
  };
  
  document.body.appendChild(button);
});

如果是用for循环，记得把循环变量用let声明：

for (let i = 0; i < fooList.length; i++) {
  const foo = fooList[i];
  const button = document.createElement('button');
  button.textContent = `选择${foo}`;
  
  button.onclick = () => {
    fetch(`api/${foo}/`)
      .then(res => res.json())
      .then(barList => { /* ... */ });
  };
  
  document.body.appendChild(button);
}

2. 闭包封装变量（兼容旧浏览器） #

如果需要兼容不支持ES6的老环境，用立即执行函数表达式(IIFE)把每个按钮的变量封装到独立作用域里：

var fooList = ['book', 'movie', 'music'];

for (var i = 0; i < fooList.length; i++) {
  var foo = fooList[i];
  var button = document.createElement('button');
  button.textContent = `选择${foo}`;
  
  // 用IIFE创建独立作用域，把当前foo传进去
  button.onclick = (function(currentFoo) {
    return function() {
      fetch(`api/${currentFoo}/`)
        .then(res => res.json())
        .then(barList => { /* ... */ });
    };
  })(foo);
  
  document.body.appendChild(button);
}

3. 绑定自定义数据到按钮元素 #

把需要的参数存在按钮的data-*属性里，点击时直接从元素本身读取，完全避开作用域问题：

const fooList = ['book', 'movie', 'music'];

fooList.forEach(foo => {
  const button = document.createElement('button');
  button.textContent = `选择${foo}`;
  // 把foo存在自定义属性里
  button.dataset.foo = foo;
  
  button.onclick = function() {
    // 从当前按钮的dataset里拿值
    const currentFoo = this.dataset.foo;
    fetch(`api/${currentFoo}/`)
      .then(res => res.json())
      .then(barList => { /* ... */ });
  };
  
  document.body.appendChild(button);
});

后续生成bar按钮时，同样可以给按钮加data-bar、data-foo属性，点击时组合成api/${foo}/${bar}/这样的URL。

4. 事件委托（适合大量按钮场景） #

如果要生成的按钮数量特别多，逐个绑定事件会有点性能开销，这时可以把事件绑定到父元素上，利用事件冒泡来处理：

<!-- 先准备一个父容器 -->
<div id="buttonContainer"></div>

const buttonContainer = document.getElementById('buttonContainer');
const fooList = ['book', 'movie', 'music'];

// 先批量生成按钮
fooList.forEach(foo => {
  const button = document.createElement('button');
  button.textContent = `选择${foo}`;
  button.dataset.foo = foo;
  buttonContainer.appendChild(button);
});

// 给父容器绑定一次事件
buttonContainer.addEventListener('click', function(e) {
  // 判断点击的是按钮元素
  if (e.target.tagName === 'BUTTON') {
    const currentFoo = e.target.dataset.foo;
    fetch(`api/${currentFoo}/`)
      .then(res => res.json())
      .then(barList => { /* ... */ });
  }
});

这种方式不管后续动态添加多少按钮，都不用再绑定新的事件，非常高效。

内容的提问来源于stack exchange，提问作者Cody Nichols