jQuery：为啥我在 li 元素上的点击事件不起作用？

Posted 2023-05-08

【中文标题】jQuery：为啥我在 li 元素上的点击事件不起作用？

【英文标题】：jQuery: Why does my click event on a li element not work?jQuery：为什么我在 li 元素上的点击事件不起作用？

【发布时间】：2013-07-09 17:23:51

【问题描述】：

当点击 li 元素时，我想移动 Div 元素“nav”。

我在 div 中有一个列表

<div id="nav">
    <ul>
        <li><a href="#t1">Flyer</a></li>
        <li><a href="#t2">Code</a></li>
        <li><a href="#t3">Angebot</a></li>
        <li><a href="#t4">Bilder</a></li>
    </ul>
</div>  

为什么这在 jquery 中不起作用：

$("#nav ul li").click(function()
    $("#nav").animate( 
        marginLeft: "-300px",
    , 1000 );
);

【问题讨论】：

一切如你所愿：jsfiddle.net/zet2d/1

所以...这应该可以工作..它有什么问题？？

您的代码运行良好（链接）[jsfiddle.net/chiragvidani/eY2yF/]

你在哪里添加你的javascript代码？ <div id="nav"> 之前还是之后？

别忘了将你的代码添加到$(docuement).ready(function()/* your code */)

【参考方案1】：

根据您使用的 Jquery 版本，这可能会或可能不会起作用：

$('body').on('click', '#nav ul li', function()
    $("#nav").animate( 
        marginLeft: "-300px",
    , 1000 );
);

我做了 $('body') 是因为如果您动态生成这些 li，那么您需要在调用它们时绑定“委托事件”。

【讨论】：

英雄！ +1 动态知识。

【参考方案2】：

代码运行正常，请查看JSFiddle。

我感觉你忘记了一些东西，比如把它放在 jQuery DOM Ready 事件中。

确保您的代码看起来像这样（在 DOM 内部就绪）

$(document).ready(function() // When the DOM is Ready, then bind the click
    $("#nav ul li").click(function()
        $("#nav").animate( 
            marginLeft: "-300px",
        , 1000 );
    );
);

确保您的页面上没有其他 javascript 错误（如果您在此代码之前这样做，代码将不起作用），检查您的控制台（在 chrome 中右键单击 > 检查元素 > 控制台）。

这两个问题中的一个（很可能）导致了您的问题，否则您将不得不自己调试（或向我们展示更多代码）。

【讨论】：

是的，伙计！忘记准备功能....那是一个非常糟糕的错误！感谢所有这些答案......但这只是世界上最简单的事情:-)

【参考方案3】：

它按预期工作，但您必须单击 li 元素。如果您单击锚点，它可能会在某些浏览器上中断。

这是一个更好的方法。

HTML

<div id="nav">
 <ul>
 <li><a href="#t1">Flyer</a></li>
 <li><a href="#t2">Code</a></li>
 <li><a href="#t3">Angebot</a></li>
 <li><a href="#t4">Bilder</a></li>
 </ul></div>

jQuery

(function($) 
    var nav = $('#nav');

    nav.find('a').on('click',function(e)
        e.preventDefault();
        nav.animate( 
            marginLeft: "-300px",
        , 1000 );
    );
)(jQuery);

当然，小提琴：http://jsfiddle.net/dKPqJ/

【参考方案4】：

试试这个，我认为你的代码也没有错误。

据我所知，如果您为 #nav 提供 float:left 属性，您的代码将起作用。

如果你设置了position，那么下面的代码就会起作用。

$(document).ready(function()
 $("#nav ul li").click(function()
 
    $("#nav").animate( 
     left: "-=300px",
    , 1000 );
 );
);

或者试试这个

$(document).ready(function()
 $("#nav ul li").click(function()
 
   $("#nav").animate(
       "left": "-=300px"
    ,
  "slow");
 );
);