jQuery click事件不起作用

guarinex 发表于 Dev

瓜里克斯

我在左侧的菜单中所有元素都具有相同的类。我已经添加了该事件$('.menuitem').click，还尝试了其他几个选项，甚至根据div id调用该事件，但均未成功。

由于浏览器控制台上没有任何错误消息，因此我在搜索错误时有点迷失了。如果您能帮助我找出问题所在，我们将不胜感激。

HTML：

 <div class='mainwindow'> 
        <div class='menupane'>
            <div id='entity' class='menuitem'><p class='glyphicon glyphicon-triangle-right'>ENTITIES</p></div>
            <div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>COURSES</p></div>
            <div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>STUDENTS</p></div>
            <div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>CLASSES</p></div>
            <div class='menuitem'></div>
        </div>

        <div class='contentpane'></div>
    </div>

判断：

$(document).ready(function(){
    console.log("loaded");

    $('.menuitem').click(function(){
        console.log("CLICKED 1");
    });

    $('#entity').click(function(){
        console.log("CLICKED 2");
    });
    $('.menupane').on('click', '.menuitem', function(){
        console.log('CLICKED 3');
    });


});

如您所见，我尝试通过几种方法添加click事件，但没有得到。多谢您的协助。

人造丝

负数z-index不会让事件在元素上分派。

$(document).ready(function() {
  console.log("loaded");
  $('.menuitem').click(function() {
    console.log("CLICKED 1");
  });
  $('#entity').click(function() {
    console.log("CLICKED 2");
  });
  $('.menupane').on('click', '.menuitem', function() {
    console.log('CLICKED 3');
  });
});

.header {
  position: absolute;
  background-color: #525252;
  height: 5%;
  width: 100%;
  min-height: 30px;
  display: block;
  margin: 0;
  z-index: 0;
  font-weight: 700;
  line-height: 175%;
  font-size: 1.4em;
  text-align: center;
  color: #FFFFFF;
  display: inline-block
}
.mainwindow .menupane {
  position: relative;
  display: inline-block;
  width: 25%;
  min-width: 200px;
  background-color: #FFFFFF;
  margin: 0;
  box-shadow: 1px 0px 10px -0px #F5F5F5;
  //z-index: -1;
  padding-top: 40px;
}
.mainwindow .contentpane {
  position: relative;
  display: inline-block;
  width: 100%;
  background-color: #FFFFFF;
  margin: 0;
  //z-index: -2;
  padding-top: 40px;
}
.menuitem {
  background-color: #525252;
  position: relative;
  width: 75%;
  height: 1.5em;
  min-height: 10px;
  border-radius: 0.65em;
  margin: 7.5%;
  color: lightgray;
  /*font-size: 0.8vw;*/
  /*line-height: 1.5em;*/
  padding-left: 10%;
  border: 0.05em solid lightgray;
  /*box-shadow: 0px 0px 1px 1px gray;*/
}
glyphicon-triangle-right {
  transition: transform 180ms ease-in;
}
glyphicon-triangle-right.rotate90 {
  transform: rotate(90deg);
  transition: transform 180ms ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='header'>SISTEMA CONTROLE DE CURSOS</div>
<div class='mainwindow'>
  <div class='menupane'>
    <div id='entity' class='menuitem'>
      <p class='glyphicon glyphicon-triangle-right'>ENTITIES</p>
    </div>
    <div class='menuitem'>
      <p class='glyphicon glyphicon-triangle-right'>COURSES</p>
    </div>
    <div class='menuitem'>
      <p class='glyphicon glyphicon-triangle-right'>STUDENTS</p>
    </div>
    <div class='menuitem'>
      <p class='glyphicon glyphicon-triangle-right'>CLASSES</p>
    </div>
    <div class='menuitem'></div>
  </div>
  <div class='contentpane'></div>
</div>