guarinex guarinex - 5 months ago 11
Javascript Question

jQuery click event is not working

I have a menu on the left where all the elements have the same class. I've added the event

$('.menuitem').click
and also tried several other options, even calling the event based on the div id but without success.

As there aren't any error messages on the browser console, I'm kinda lost on the search for the error. I appreciate if you could help me figure out what the problem is.

Here is the Fiddle

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>


DOM:

$(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');
});


});


As you can see, I tried adding the click event through several methods and I'm not getting it. Thanks a ton for your help.

Answer

Negative z-index will not let event to dispatch on elements.

$(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>

Fiddle Demo