JQuery - 将点击事件添加到 LI 或 SPAN 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/835993/
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 - add click event to LI or SPAN elements?
提问by Keith Barrows
I am trying to add a click event to a LI element but it is not firing in the page. My page markup looks like:
我正在尝试向 LI 元素添加点击事件，但它没有在页面中触发。我的页面标记如下所示：
<div id="Navigation">
<ul>
<li class="navPrevNext inactive">|< First Page</li>
<li class="navPrevNext inactive">< Prev Page</li>
<li class="navIndex selected" title="0 ">1</li>
<li class="navIndex notselected" title="1 ">2</li>
<li class="navIndex notselected" title="2 ">3</li>
<li class="navPrevNext active" title="1">Next Page ></li>
<li class="navPrevNext active" title="2">Last Page >|</li>
</ul>
</div>
And in my JS code I have:
在我的 JS 代码中，我有：
$("#Navigation li").live('click', function(e) { e.preventDefault; this.blur(); return updateNavigation($(this).attr('title')); });
Any thoughts?
有什么想法吗？
TIA
TIA
回答by Parrots
You sure you have jquery 1.3 included in your code? The following works fine (direct copy and paste from your question) for me when I click on any of the LIs:
您确定您的代码中包含 jquery 1.3 吗？当我单击任何 LI 时，以下内容对我来说很好（从您的问题中直接复制和粘贴）：
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function updateNavigation(title) {
alert(title);
}
$("#Navigation li").live('click', function(e) {
e.preventDefault;
this.blur();
return updateNavigation($(this).attr('title'));
});
</script>
</head>
<body>
<div id="Navigation">
<ul>
<li class="navPrevNext inactive">|< First Page</li>
<li class="navPrevNext inactive">< Prev Page</li>
<li class="navIndex selected" title="0 ">1</li>
<li class="navIndex notselected" title="1 ">2</li>
<li class="navIndex notselected" title="2 ">3</li>
<li class="navPrevNext active" title="1">Next Page ></li>
<li class="navPrevNext active" title="2">Last Page >|</li>
</ul>
</div>
</body>
</html>
Are you sure your updateNavigation function is working right? Maybe it's being triggered but something is wrong within it...
您确定您的 updateNavigation 功能正常工作吗？也许它正在被触发，但它内部有问题......
回答by tvanfosson
I did the same thing as @Parrots and it works for me. You might, however, want to change your selector to:
我和@Parrots 做了同样的事情，它对我有用。但是，您可能希望将选择器更改为：
$("#Navigation li[title]" ).live('click', function(e) {
e.preventDefault;
this.blur();
return updateNavigation($(this).attr('title'));
});
So that the handler is only applied to elements that have a title attribute.
这样处理程序只应用于具有标题属性的元素。
回答by Drew
I had a similar problem where I was using a popup list that the user selected. Basically the user clicks an input box and a ul is revealed.
我在使用用户选择的弹出列表时遇到了类似的问题。基本上，用户单击输入框并显示 ul。
This worked great with a 500ms animation, but when switching to 250ms the scrolling down animation was too fast and apparently the click event never fired on a li.
这对于 500 毫秒的动画效果很好，但是当切换到 250 毫秒时，向下滚动动画太快了，显然单击事件从未在 li 上触发。
回答by Defrag
don′t use span it′s better delegate
不要使用跨度它是更好的委托
