当覆盖锚标记时，更改innerHTML会破坏parentNode吗？ 怎么修？

Question

我为click事件设置了两个事件处理程序。 一个在表中的所有<th> ，另一个在文档上的通用的。

<th>处理程序中的部分代码更改了单击元素的innerHTML。 至关重要的是，我认为， th标签内部有一个锚标签。

文档处理程序中的部分代码检查单击元素的parentNode。

看来这两个事实导致了一个问题。 如果我注释掉innerHTML修改行，一切正常。 如果我把它留在里面，我得到元素的parentNode “null”。

这是一个已知的问题，如果是这样的解决方案是什么？ 这是Chrome中的错误，还是JavaScript / DOM因某种原因而导致的行为？

 function isInside(eChild, eParent) { alert('element is ' + eChild); if (eChild === eParent) { return true; } if (eChild === document) { return false; } return isInside(eChild.parentNode, eParent); } function init1() { document.getElementById('th').addEventListener('click', function(e) { document.getElementById('th').innerHTML = '<a href="#">Changed</a>'; }); } function init2() { document.addEventListener('click', function(e) { if (isInside(e.target, document.getElementById('table'))) { alert('found in table'); } else { alert('not found in table'); } }); } init1(); init2(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="table"> <thead> <tr> <th id="th"><a href="#">Click me</a> </th> </tr> </thead> </table> 

如果你注释掉了

document.getElementById('th').innerHTML = '<a href="#">Changed</a>';

在JavaScript中，您将遇到所需的行为。

我假设这是因为事件是在<a>而不是<th>上触发，然后我在innerHTML调用中用新的替换该锚点。 我该如何解决这个问题？

Answer 1

发生这种情况是因为单击的元素在请求其parentNode时不再存在于文档中。 你用一个完全不同的元素取而代之。

而不是更改父元素的innerHTML，因此替换使用新元素单击的元素，只需更改现有元素即可。

我已经压缩了下面的完整演示以节省空间，但解决方案的核心在于：

var th = document.getElementById('th');
var link = th.querySelector('a');

th.addEventListener('click', function(e) {
  link.textContent = 'Changed';
});

这是演示：

 function isInside(eChild, eParent) { alert('element is ' + eChild); if (eChild === eParent) return true; if (eChild === document) return false; return isInside(eChild.parentNode, eParent); } var th = document.getElementById('th'); var link = th.querySelector('a'); th.addEventListener('click', function(e) { link.textContent = 'Changed'; }); document.addEventListener('click', function(e) { if (isInside(e.target, document.getElementById('table'))) alert('found in table'); else alert('not found in table'); }); 

 <table id="table"><thead><tr><th id="th"><a href="#">Click me</a></th></tr></thead></table>