JQuery - 将点击事件添加到 LI 或 SPAN 元素？答案

【问题标题】：JQuery - add click event to LI or SPAN elements?JQuery - 将点击事件添加到 LI 或 SPAN 元素？
【发布时间】：2009-05-07 17:27:31
【问题描述】：

我正在尝试向 LI 元素添加点击事件，但它没有在页面中触发。我的页面标记如下：

<div id="Navigation">
<ul>
    <li class="navPrevNext inactive">|&lt; First Page</li>
    <li class="navPrevNext inactive">&lt; 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 &gt;</li>
    <li class="navPrevNext active" title="2">Last Page &gt;|</li>
</ul>
</div>

在我的 JS 代码中，我有：

$("#Navigation li").live('click', function(e) { e.preventDefault; this.blur(); return updateNavigation($(this).attr('title')); });

有什么想法吗？

TIA

【问题讨论】：

一件事：e.preventDefault 应该是 e.preventDefault()

标签： jquery asp.net-mvc events

【解决方案1】：

您确定您的代码中包含 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">|&lt; First Page</li>
    <li class="navPrevNext inactive">&lt; 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 &gt;</li>
    <li class="navPrevNext active" title="2">Last Page &gt;|</li>
</ul>
</div>
</body>
</html>

您确定您的 updateNavigation 功能正常吗？也许它正在被触发，但其中有问题......

【讨论】：

我的开发环境正在密谋反对我。重新启动后，我的 JS 文件已更新，并且按预期工作。似乎旧文件被保存在临时缓存中。感谢您的确认！

【解决方案2】：

我和@Parrots 做了同样的事情，它对我有用。但是，您可能希望将选择器更改为：

$("#Navigation li[title]" ).live('click', function(e) {
     e.preventDefault;
     this.blur();
     return updateNavigation($(this).attr('title'));
});

这样处理程序只适用于具有标题属性的元素。

【讨论】：

谢谢 - 我会试试看！（最好避免错误而不是稍后处理）

【解决方案3】：

我在使用用户选择的弹出列表时遇到了类似的问题。基本上，用户单击输入框并显示 ul。

这对 500 毫秒的动画效果很好，但是当切换到 250 毫秒时，向下滚动动画太快了，显然点击事件从未在 li 上触发。

【讨论】：

【解决方案4】：

不要使用跨度它更好的委托

【讨论】：