jquery - jquery click 事件处理程序没有被调用

Question

在我的菜单中，我有以下项目：

<ul>
    <li class="menu_item" data-content_id="#landscape_context">Landscape Context</li>
    <li class="menu_item" data-content_id="#terrestrial_features">Terrestrial Features</li>
    <li class="menu_item" data-content_id="#aquatic_features">Aquatic Features</li>
    <li class="menu_item" data-content_id="#vegetaion_land_use">Vegetation/Land Use</li>
    <li class="menu_item" data-content_id="#additional_features">Additional Features</li>
    <li class="menu_item" data-content_id="#data_descriptions">Data Descriptions</li>
    <li class="menu_item" data-content_id="#faq">FAQ</li>
</ul>

然后，当用户单击其中一个项目时，我想显示该项目的内容data-content_id。但是，当我单击时，什么都没有发生。

这是javascript：

$(".menu_item").click(function () {
    alert("Hello");
}); 

我已经用简单的警报替换了代码，当我单击菜单项时它也不会出现。

我查看了在 SO 上找到的许多其他示例，但找不到与我的解决方案有任何不同的地方。

有人看到我在这里可能做错了吗？

谢谢

Answer 1

$(document).ready(function(){
   $(".menu_item").click(function () {
       alert(  $(this).attr("data-content_id") );
   }); 
}); 

Answer 2

元素要么在脚本之后加载到 DOM 中，要么异步加载。如果是前者，只需将所有内容都包裹在$(document).ready(function () {...（或$(function () {...

如果是后者，则使用事件委托，例如：

$(document).on('click', '.menu_item', function () {

Answer 3

试试这个代码：

$(document).ready(function() {
   $(".menu_item").click(function () {
       alert($(this).attr("data-content_id"));
   }); 
});