jQuery：为什么我在 li 元素上的点击事件不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17593377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: Why does my click event on a li element not work?
提问by user2477311
I want to move the Div-element "nav", when a li-element was clicked.
当单击 li 元素时，我想移动 Div 元素“导航”。
I have a List in a div
我在一个 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>
Why doesnt this work in jquery:
为什么这在 jquery 中不起作用：
$("#nav ul li").click(function(){
$("#nav").animate({
marginLeft: "-300px",
}, 1000 );
});
采纳答案by Anil
The code works fine as you expect, view the JSFiddle.
代码可以正常工作，请查看JSFiddle。
I have a feeling your forgetting something like putting it in the jQuery DOM Ready event.
我有一种感觉，你忘记了一些东西，比如把它放在 jQuery DOM Ready 事件中。
Make sure you code looks like this (inside the DOM Ready)
确保你的代码看起来像这样（在 DOM Ready 中）
$(document).ready(function(){ // When the DOM is Ready, then bind the click
$("#nav ul li").click(function(){
$("#nav").animate({
marginLeft: "-300px",
}, 1000 );
});
});
Make sure you have no other javascript errors on your page (If you do before this code, the code will not work), Check your console (In chrome right click > Inspect Element > console).
确保您的页面上没有其他 javascript 错误（如果您在此代码之前这样做，则代码将不起作用），检查您的控制台（在 chrome 中右键单击 > 检查元素 > 控制台）。
One of these 2 issues are causing your problems (most likely), else you will have to debug it yourself (or show us more code).
这两个问题之一导致了您的问题（最有可能），否则您将不得不自己调试（或向我们展示更多代码）。
回答by MonkeyZeus
Depending on what version of Jquery you are using this may or may not work:
根据您使用的 Jquery 版本，这可能有效，也可能无效：
$('body').on('click', '#nav ul li', function(){
$("#nav").animate({
marginLeft: "-300px",
}, 1000 );
});
I did $('body') because if you are generating these li's dynamically then you need to bind 'delegated events' as they're called.
我做了 $('body') 因为如果你动态生成这些 li，那么你需要在调用它们时绑定“委托事件”。
回答by Ricky
Try out this one, and i think there is no error in your code as well.
试试这个，我认为你的代码也没有错误。
in my knowledge your code will work if you give float:leftproperty for #nav.
据我所知，如果您为#nav提供float:left属性，您的代码将起作用。
if you set positionthen the following code will work.
如果您设置位置，则以下代码将起作用。
$(document).ready(function(){
$("#nav ul li").click(function()
{
$("#nav").animate({
left: "-=300px",
}, 1000 );
});
});
Or try this one
或者试试这个
$(document).ready(function(){
$("#nav ul li").click(function()
{
$("#nav").animate({
"left": "-=300px"
},
"slow");
});
});
回答by Chris
It works as expected, but you have to click on the li-element. If you click on the anchor, it might break on some browsers.
它按预期工作，但您必须单击 li 元素。如果您单击锚点，它可能会在某些浏览器上中断。
Here is a better approach on this.
这是一个更好的方法。
HTML
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
jQuery
(function($) {
var nav = $('#nav');
nav.find('a').on('click',function(e){
e.preventDefault();
nav.animate({
marginLeft: "-300px",
}, 1000 );
});
})(jQuery);
And of course, fiddle: http://jsfiddle.net/dKPqJ/
当然，小提琴：http: //jsfiddle.net/dKPqJ/
