2

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

Mohammad
  • 20,339
  • 15
  • 51
  • 79
Waleed Naveed
  • 1,915
  • 1
  • 21
  • 42
  • 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

3 Answers3

9

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>
Mohammad
  • 20,339
  • 15
  • 51
  • 79
1

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>
Manoz
  • 6,218
  • 12
  • 62
  • 108
1

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
kgbph
  • 711
  • 1
  • 6
  • 25