javascript - innerHTML之后无法绑定(bind)onclick事件

var gid = function (id) {
  return document.getElementById(id);
},
info = gid('info');

function out(str) {
  if ((info.innerHTML + '').trim() === '') {
    info.innerHTML += '<a id="cleanResult" href="javascript:;">clean</a><br />';
    gid('cleanResult').onclick = function () {
      info.innerHTML = '';
      return false;
    };
  }
  info.innerHTML += str;
}
out('1234');

为什么a#cleanResult无法绑定onclick事件？
我更改代码，添加setTimeout：

 setTimeout(function () {
   gid('cleanResult').onclick = function () {
    info.innerHTML = '';
    return false;
   };
 },1);

而且有效。

最佳答案

更改innerHTML时，这将导致浏览器完全重建DOM。因此，在这种情况下，您的最终info.innerHTML += str;会导致包含子对象的DOM的重建。因此，您对cleanResult的引用会丢失。

但是，通过在onclick中添加setTimeout绑定，将在DOM重建并因此正确绑定之后被调用。因此，如果您不在乎该方法之前发生的情况，则仅应追加到innerHTML。您可以按以下方式解决问题：

var gid = function (id) {
    return document.getElementById(id);
};

function out(str) {
    var info = gid('info');
    if (info.innerHTML.trim() === '') {
        info.innerHTML += '<a id="cleanResult" href="javascript:;">clean</a><br />';
        info.innerHTML += str;
        gid('cleanResult').onclick = function () {
            info.innerHTML = '';
            return false;
        };
    } else {
        info.innerHTML += str;
    }
}
out('1234');

我还必须说，对于诸如info之类的全局变量声明，您需要非常小心。始终确保在变量声明之前添加var，以防止范围错误。

关于javascript - innerHTML之后无法绑定(bind)onclick事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14817170/