How to click on first li element programmatically using javascript/jquery?

Question

I have a list of li elements inside ul

<ul>
   <li><a href=#>ABC</a></li>
   <li><a href=#>DEF</a></li>
   <li><a href=#>GHI</a></li>
</ul>

How do i programmatically click first element of li and call a JS function on that click. i.e. i want the li element to be clicked when the page loads

do you want to click the first `li` element or click the Link `a` inside the first li-Element? — cloned, Oct 01 '18 at 08:15

score 9 · Accepted Answer · answered Oct 01 '18 at 08:12

Select first li using :first selector and use .trigger() to fire click event for it.

$("ul li:first").trigger("click");

$("ul li:first").click(function(){
  console.log("First li clicked");
});
$("ul li:first").trigger("click");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li><a href=#>ABC</a></li>
   <li><a href=#>DEF</a></li>
   <li><a href=#>GHI</a></li>
</ul>

score 1 · Answer 2 · answered Oct 01 '18 at 08:13

Try this

function clickAlert(){
alert("I am called");
}

$('ul li:first').trigger('click',clickAlert());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li><a href=#>ABC</a></li>
   <li><a href=#>DEF</a></li>
   <li><a href=#>GHI</a></li>
</ul>

score 1 · Answer 3 · answered Oct 01 '18 at 08:16

jQuery has ways for declaring event handlers and triggering them.

Select the first <li> element with $('ul li:first')

$('ul li:first').click(function() {
    // This will handle the click event
    // Put your JS function here.
});

$('ul li:first').click(); // This triggers the click event
$('ul li:first').trigger('click') // Will also trigger click event

How to click on first li element programmatically using javascript/jquery?

3 Answers3