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无法绑定onclick事件？
我更改了代码，添加setTimeout：

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

它有效。

Answer 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以防止作用域错误。

在innerHTML之后无法绑定onclick事件

1 个答案: