jQuery 不适用于 <li> 元素，但不适用于 <a> 元素答案

【问题标题】：jQuery not works on <li> elements, but not <a> elementsjQuery 不适用于 <li> 元素，但不适用于 <a> 元素
【发布时间】：2013-01-10 11:36:12
【问题描述】：

我有一些 jQuery 代码在单击具有特定 ID 的项目时运行。它在 ID 是 <li> 元素的一部分时起作用，但在它位于 <a> 元素中时不起作用。为什么会这样？我想使用一个，因为如果用户关闭了 JavaScript，它可以让我实现一些东西。

编辑： preventdefault 或 return false 似乎都没有任何区别。

HTML 和代码如下：

<li><a id="OfficeNav-Bath" class="first" href="#bath">Bath</a></li>

编辑：如果<a> 元素中没有指定 HREF，它会起作用。

$(function() {
    $("#OfficeNav-Bath").click(function(){
        $('.office').removeClass('visible');
    });             
});

知道为什么会这样吗？提前致谢。

【问题讨论】：

【解决方案1】：

我认为您在使用<a> 标签时并没有阻止默认事件，所以尝试这样做：

$(function() {
   $("#OfficeNav-Bath").click(function(e){
     e.preventDefault();
     $('.office').removeClass('visible');
   });           
});

【讨论】：

【解决方案2】：

你必须为点击事件添加一个简单的东西：

e.preventDefault();

【讨论】：

【解决方案3】：

当单击锚元素时，浏览器会尝试导航到锚的 href 属性指向的 URL。

可以在事件处理程序作为参数接收的event 对象上使用preventDefault 方法覆盖此行为。

$("#OfficeNav-Bath").click(function(event){
    event.preventDefault();
    ...
});

【讨论】：