javascript - innerHTML 后绑定(bind) onclick 事件失败

Question

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绑定(bind)onclick事件失败？
我更改代码，添加 setTimeout:

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

并且它有效。

Answer 1

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

但是，通过添加您的 onclick绑定(bind)在 setTimeout ，您将在 DOM 重建并正确绑定(bind)后被调用。因此，如果您不关心方法中之前发生的情况，则应该只附加到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在变量声明之前，以防止范围错误。