javascript - Div 单击事件不起作用 - jQuery

Question

我已经查看了其他几个线程中的解决方案(大多数解决方案与此类似: div click event not working )，但我只是没有运气让点击事件在我的 div 上工作。见下面的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-index 的结果。后来在代码中，在 div 顶部添加了一个 svg，使其无法与之交互。谢谢大家!

Answer 1

我不太确定为什么要调用文档而不是仅将事件添加到元素中。我也不太确定你是想在这里使用 jQuery 还是 JS。你说的是 JS，但你使用的函数是 jQuery，并且只有在你使用 jQuery 库时才有效(如果你更了解的话，不是试图贬低)。尝试一下这个功能:

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

});

这也可能与您的 z 索引有关。仅根据这段代码，不太确定为什么它们是必要的。