1 
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);

它有效。

4

1 回答 1

1

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

但是，通过onclick在 a 中添加您的绑定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在变量声明之前添加以防止范围错误。

于 2013-02-11T17:39:11.307 回答