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的结果。后来代码中有一个svg被添加到div之上，因此无法与之交互。谢谢大家！

Answer 1

我不确定你为什么要调用文档，而不是仅仅将事件添加到元素中。我也不确定你是否尝试在这里使用jQuery或JS。你说JS，但你正在使用的函数是jQuery，只有在你使用jQuery库时才会起作用（如果你知道的话，不要试图去贬低）。试试这个功能：

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

}）;

它也可能与你的z索引有关。基于这段代码，我们不确定为什么他们是必要的。

Div Click Event Not Working - jQuery

1 个答案: