Javascript jQuery单击事件不起作用

我在左边有一个菜单，所有元素都有相同的类。我已经添加了事件

$（'.menuitem'）。单击

，还尝试了其他几个选项，甚至根据div id调用了事件，但没有成功

由于浏览器控制台上没有任何错误消息，我在搜索错误时有些不知所措。如果你能帮我找出问题所在，我将不胜感激

HTML:

---

正如您所看到的，我尝试通过几种方法添加click事件，但我没有得到它。非常感谢您的帮助。

负

z-index

不会让事件在元素上调度

$（文档）.ready（函数（）{
控制台日志（“已加载”）；
$（'.menuitem'）。单击（函数（）{
控制台日志（“单击1”）；
});
$（“#实体”）。单击（函数（）{
控制台日志（“单击2”）；
});
$（'.menupane'）。在（'单击'，'.menuitem'，函数（）上{
log（'CLICKED 3'）；
});
});
.header{
位置：绝对位置；
背景色：#525252；
身高：5%；
宽度：100%；
最小高度：30px；
显示：块；
保证金：0；
z指数：0；
字号：700；
线高：175%；
字号：1.4em；
文本对齐：居中；
颜色：#FFFFFF；
显示：内联块
}
.mainwindow.menupane{
位置：相对位置；
显示：内联块；
宽度：25%；
最小宽度：200px；
背景色：#FFFFFF；
保证金：0；
盒影：1px 0px 10px-0px#f5；
//z指数：-1；
填充顶部：40px；
}
.mainwindow.contentpane{
位置：相对位置；
显示：内联块；
宽度：100%；
背景色：#FFFFFF；
保证金：0；
//z指数：-2；
填充顶部：40px；
}
梅努特姆先生{
背景色：#525252；
位置：相对位置；
宽度：75%；
高度：1.5em；
最小高度：10px；
边界半径：0.65em；
利润率：7.5%；
颜色：浅灰色；
/*字体大小：0.8vw*/
/*线高：1.5em*/
左：10%；
边框：0.05em实心浅灰色；
/*盒影：0px 0px 1px灰色*/
}
象形符号三角形右{
过渡：180毫秒的过渡；
}
glyphicon-triangle-right.rotate90{
变换：旋转（90度）；
过渡：180毫秒的过渡；
}

库索斯控制系统
实体
球场
学生
类
Negative
z-index
不会让事件在元素上分派


$（文档）.ready（函数（）{
控制台日志（“已加载”）；
$（'.menuitem'）。单击（函数（）{
控制台日志（“单击1”）；
});
$（“#实体”）。单击（函数（）{
控制台日志（“单击2”）；
});
$（'.menupane'）。在（'单击'，'.menuitem'，函数（）上{
log（'CLICKED 3'）；
});
});
.header{
位置：绝对位置；
背景色：#525252；
身高：5%；
宽度：100%；
最小高度：30px；
显示：块；
保证金：0；
z指数：0；
字号：700；
线高：175%；
字号：1.4em；
文本对齐：居中；
颜色：#FFFFFF；
显示：内联块
}
.mainwindow.menupane{
位置：相对位置；
显示：内联块；
宽度：25%；
最小宽度：200px；
背景色：#FFFFFF；
保证金：0；
盒影：1px 0px 10px-0px#f5；
//z指数：-1；
填充顶部：40px；
}
.mainwindow.contentpane{
位置：相对位置；
显示：内联块；
宽度：100%；
背景色：#FFFFFF；
保证金：0；
//z指数：-2；
填充顶部：40px；
}
梅努特姆先生{
背景色：#525252；
位置：相对位置；
宽度：75%；
高度：1.5em；
最小高度：10px；
边界半径：0.65em；
利润率：7.5%；
颜色：浅灰色；
/*字体大小：0.8vw*/
/*线高：1.5em*/
左：10%；
边框：0.05em实心浅灰色；
/*盒影：0px 0px 1px灰色*/
}
象形符号三角形右{
过渡：180毫秒的过渡；
}
glyphicon-triangle-right.rotate90{
变换：旋转（90度）；
过渡：180毫秒的过渡；
}

库索斯控制系统
实体
球场
学生
类
您的
z-index
CSS导致了问题。下面是一个更新的示例，没有这些示例，因此您可以从那里修复：
您的
z-index
CSS导致了问题。下面是一个更新的示例，没有这些示例，因此您可以从那里进行修复：
您的问题不是事件的绑定，而是类.mainwindow.menupane具有此属性位置：相对

事件已正确添加，但由于该类，元素的实际位置不同。移除此属性，所有工作正常

jsfiddle：

您的问题不是事件的绑定，而是具有此属性的类.mainwindow.menupane位置：相对

事件已正确添加，但由于该类，元素的实际位置不同。移除此属性，所有工作正常

jsfiddle：

只需注释所有
css
并测试…为什么
z-index
为负值？问题是
z-index:-1.main window.menupane
CSS
中的code>只需注释所有
CSS
并测试…为什么为负
z-index
？问题是
z-index:-1.main window.menupane
CSS

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


});

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