Jquery click event for the first li item

Question

I am trying to call a function when the user clicks on the first item on an unordered list. But it does not seem to work.

This is what I did:

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

Well you'll need to make sure that you've really got an element with that id, and that it's a parent of your `

score 4 · Accepted Answer · answered Aug 21 '14 at 21:34

For dynamically created content use event delegation

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

or if the #listResults is creaded dynamically

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

score 1 · Answer 2 · answered Aug 21 '14 at 21:28

1

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!"); 
});

answered Aug 21 '14 at 21:28

Adriano Galesso Alves

790
14
21

And why would this produce a different result to the code in the question? Other than the use of a different means of selection it would select exactly the same element. – David Thomas Aug 21 '14 at 21:31
In the js no difference (":first" or ".first())". That's why I've created the small html, to see if it is the same as the user is doing – Adriano Galesso Alves Aug 21 '14 at 21:42

Jquery click event for the first li item

2 Answers2