Javascript 无法在innerHTML之后绑定onclick事件

当您更改

innerHTML

时，这会导致浏览器完全重建DOM。因此，在本例中，您的最终

info.innerHTML+=str导致重建包含子对象的DOM。因此，您对
cleansult
的引用将丢失

但是，通过在
setTimeout
中添加
onclick
绑定，将在重建DOM并正确绑定后调用您。因此，如果您不关心之前在方法中发生的事情，那么只应该将其附加到innerHTML。您可以按如下方式修复您的案例：

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

var gid=函数（id）{
返回文档.getElementById（id）；
};   
功能输出（str）{
var info=gid（'info'）；
如果（info.innerHTML.trim（）=''）{
info.innerHTML+='
'；
info.innerHTML+=str；
gid（'cleansult'）。onclick=function（）{
info.innerHTML=''；
返回false；
};
}否则{
info.innerHTML+=str；
}
}
out（'1234'）；

我还要说，对于全局变量声明，例如
info
，您需要非常小心。始终确保在变量声明之前添加
var
，以防止范围错误。
更改
innerHTML
时，这会导致浏览器完全重建DOM。因此，在本例中，您的最终
info.innerHTML+=str导致重建包含子对象的DOM。因此，您对
cleansult
的引用将丢失

但是，通过在
setTimeout
中添加
onclick
绑定，将在重建DOM并正确绑定后调用您。因此，如果您不关心之前在方法中发生的事情，那么只应该将其附加到innerHTML。您可以按如下方式修复您的案例：

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

var gid=函数（id）{
返回文档.getElementById（id）；
};   
功能输出（str）{
var info=gid（'info'）；
如果（info.innerHTML.trim（）=''）{
info.innerHTML+='
'；
info.innerHTML+=str；
gid（'cleansult'）。onclick=function（）{
info.innerHTML=''；
返回false；
};
}否则{
info.innerHTML+=str；
}
}
out（'1234'）；

我还要说，对于全局变量声明，例如
info
，您需要非常小心。始终确保在变量声明之前添加
var
，以防止范围错误。
实际上
info
和许多其他变量是在闭包下声明的。谢谢你的回答！实际上，
info
和许多其他变量都是在闭包下声明的。谢谢你的回答！见
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');