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

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

3 个答案: