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

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

Answer 1

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>