Çapa etiketi üzerine yazıldığında innerHTML kopyalar parentNode değiştiriliyor mu? Nasıl düzeltilir?

Question

Ben tıklama etkinliğinde ayarlanmış iki olay işleyicileri var. Bir tablodaki tüm <th> s ve bir başka belge üzerinde bir genel. <th> işleyicisi kod

Bölüm tıklanan elemanın innerHTML değiştirir. Önemli olarak, bence, th etiketinde bir çapa etiketi var. Belge işleyici kod

Bölüm tıklanan elemanın parentNode denetler.

O bu iki gerçekler bir soruna neden görünür. InnerHTML modifikasyon satırını açıklarsam, her şey iyi çalışır. Yine de onu bırakırsam, elemanın parentNode için "boş" olurum.

bunun bilinen bir sorun var mı ve eğer öyleyse çözüm nedir? Chrome'da bir hata mı, yoksa JavaScript/DOM bir nedenden dolayı nasıl davranıyor? Eğer JavaScript

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

satırını açıklama ise

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>

istenen davranışı yaşayacaksınız.

Bunun nedeni, olayın <th> yerine <a> yerine tetiklendiğinden ve bu bağlantıyı innerHTML çağrısında yenisiyle değiştirdiğimi sanıyorum. Bunu nasıl düzeltirim? tıklandığı eleman artık parentNode istenen noktada belgede mevcut olmadığından bu oluyor

Answer 1

. Onu tamamen farklı bir elementle değiştirdin. Bunun yerine, bu nedenle yeni bir eleman ile tıklandığı elemanı yerine ebeveyn innerHTML değişen

, basitçe mevcut elemanını değiştirmek.

Ben yer kazanmak için aşağıda tam demo özetledim

, çözümün ancak et buradadır:

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>