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

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

和它的作品。

Answer 1

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

但是，通过在setTimeout中添加onclick绑定，在重建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以防范范围错误。