第一个li项目的Jquery单击事件[重复]答案

【问题标题】：Jquery click event for the first li item [duplicate]第一个li项目的Jquery单击事件[重复]
【发布时间】：2014-08-21 21:22:23
【问题描述】：

当用户单击无序列表上的第一项时，我试图调用一个函数。但这似乎不起作用。

这就是我所做的：

$('#listResults li').first().on('click', function() {
    console.log('clicked');                         
});

【问题讨论】：

你把代码放在哪里了？
@Pointy 在文档就绪函数中
为我工作：jsfiddle.net/nts6hn27
嗯，你需要确保你确实有一个具有该 id 的元素，并且它是你的 <li> 元素的父元素。您可以添加一个console.log($("#listResults li").first().length) 呼叫 - 它应该记录“1”。
动态创建的内容？

标签： javascript jquery html events javascript-events

【解决方案1】：

对于动态创建的内容，使用事件委托

$('#listResults').on('click', 'li:first', function() {
    alert("Wunderbar!"); 
});

或者如果 #listResults 是动态创建的

$(document).on('click', '#listResults li:first', function() {
    alert("Wunderbar!"); 
});

【讨论】：

【解决方案2】：

Is this what you want?

<ul id="listResults">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

$('#listResults li:first').on('click', function() {
    alert("Wunderbar!"); 
});

【讨论】：

为什么这会产生与问题中的代码不同的结果？除了使用不同的选择方式之外，它会选择完全相同的元素。
在 js 中没有区别（":first" 或 ".first())"。这就是我创建小 html 的原因，看看它是否与用户正在做的一样