时间戳

首页 > 解决方案 > addEventListener 回调在 createElement 后不起作用（仅在 chrome 中）

javascript - addEventListener 回调在 createElement 后不起作用（仅在 chrome 中）

问题描述

我需要纯 JavaScript，而不是 jQuery。

我创建了一个带有值和文本内容的元素“选项”，之后我将 addEventListener 设置为每个选项元素，这是由一个按钮生成的，但是回调不起作用并且不显示 innerHTML “它起作用了！” id 为“info”的 div 标签上也没有。

此行为仅在 Chrome 上发生，但在 Firefox 上运行良好。我认为是 DOM，但我对此一无所知。我测试了这个解决方案无济于事。

var n = 0;

function myFunction() {
  n += 1;
  var listElement = document.querySelector('#list');
  var infoElement = document.querySelector('#info');
  var optElement = document.createElement('option');
  optElement.setAttribute('value', 'opción ' + n);
  optElement.textContent = 'opción ' + n;
  listElement.append(optElement);

  optElement.addEventListener('click', function() {
    infoElement.innerHTML = 'it works!';
  });

}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <p>Click the button to make a OPTION element.</p>
  <select id="list"></select>
  <button onclick="myFunction()">Try it</button>
  <div id="info"></div>


</body>

</html>

标签： javascriptdom

解决方案

推荐阅读