Div Click Event Not Working - jQuery

Question

私はいくつかの他のスレッド（ほとんどこのソリューションに類似したソリューション：div click event not working）でソリューションを見てきました。以下のjsのコードを参照してください：

$(document).ready(function() { 
    $(document).on('click', '#l1', function() { 
     alert('clicked header'); 
    }); 
}); 

HTML：

<div id = 'main' class = 'container' style = 'height: 100%; width: 100%; float: left;'> 
    <div id = 'left' class = 'container' style = 'height: 100%; width: 70%; float: left;'> 
    <div id = 'l1' class = 'container bordered' align = 'right' style = 'height: 100%; width: 20%; float: left;'> 
     <h1 id = 'l1Header'>Div Text</h1> 
    </div> 
    </div> 
</div> 

のCss：

html body { 
    height: 100%; 
    width: 100%; 
} 

.container { 
    position: relative; 
    z-index: -10; 
} 

.bordered { 
    border: 2px solid #808080; 
} 

#main { 
    font-size: 12px; 
    text-align: right; 
    font-family: sans-serif; 
    line-height: 1.5; 
    vertical-align: middle; 
} 

h1 { 
    font-size: 18px; 
    text-align: center; 
    font-family: sans-serif; 
    font-weight: normal; 
    line-height: 1.5; 
    vertical-align: top; 
    z-index: 10; 
} 

任意のアイデア？

編集：これはz-インデックスの結果です。コードの後半には、divの上にsvgが追加され、対話することが不可能になっていました。皆さん、ありがとうございました！

Answer 1

私は本当に要素にイベントを追加するのではなく、なぜドキュメントを呼び出すのか分かりません。 jQueryやJSをここで使用しようとしているのかどうかもわかりません。あなたはJSと言っていますが、使用している関数はjQueryで、jQ​​ueryライブラリを使用している場合にのみ機能します。この関数に試してみてください：

document.getElementById("l1").addEventListener("click", function(){ 
alert("Clicked Header"); 

}）;

また、あなたのz-インデックスと関係があります。このコードスニペットに基づいてなぜ必要なのかは分かりません。