javascript - 动态按钮上的 JS 事件监听器

Question

想知道为什么当添加超过 1 个动态按钮时，它们的切换 bg 颜色监听器无法始终如一地工作。

如果我添加比方说 3 个按钮，按钮 1 和 3 的监听器将起作用，而按钮 2 则不起作用。

//document.ready
function ready(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

//event listener on dynamic buttons not in DOM
ready(function() {
  document.querySelector('.makeB').addEventListener('click', function() {
    var btn = document.createElement("button");
    var t = document.createTextNode("toggle bg");
    btn.appendChild(t);
    document.body.appendChild(btn);
    btn.classList.add('elis');

    var newBtns = document.querySelectorAll('.elis');
    newBtns.forEach(function(i) {
      i.addEventListener('click', function() {
        document.body.classList.toggle('bg');
      })
    })
  })
})

.bg {
  background: red;
}

<button class="makeB">create button</button>

研究了一些冒泡和事件委托(delegate)选项，看看是否有帮助(类似于 jquery 方法 $(document).on( eventName, selector, function(){} ); 但没有运气)

如何使动态按钮始终如一地工作，当前场景有什么问题？

请只使用 JS(不要使用 jQuery)。

Answer 1

//document.ready
function ready(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

//event listener on dynamic buttons not in DOM
ready(function() {
  document.querySelector('.makeB').addEventListener('click', function() {
    var btn = document.createElement("button");
    var t = document.createTextNode("toggle bg");
    btn.appendChild(t);
    document.body.appendChild(btn);
    btn.classList.add('elis');
    btn.addEventListener('click', function() {
      document.body.classList.toggle('bg');
    })
  })
})

.bg {
  background: red;
}

<button class="makeB">create button</button>