jQuery click event is not working

Question

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 1

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

Answer 2

Your z-index CSS was causing issues. Here is an updated example without those so you can fix from there: https://jsfiddle.net/zxgkprw9/1/

Answer 3

your issue is not the binding of the event but the class .mainwindow .menupane having this property position: relative;

the events is added properly but due to this class the actual position of the element is different . Remove this property and all work fine

jsfiddle : https://jsfiddle.net/zxgkprw9/3/

.mainwindow .menupane{

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;
}