I have the following HTML code in my website:
<div id="gallery">
<ul class="pictures">
<li><a href="#" data-filter="*" class="active">All</a></li>
<li><a href="#" data-filter=".web">Web</a></li>
<li><a href="#" data-filter=".design">Design</a></li>
<li><a href="#" data-filter=".video">Video</a></li>
</ul>
</div>
And I want to have a click event triggering when the page loads. I want the first (or second) list item to be clicked when the page loads.
I've tried with the following code, but I failed and I don't know how to do it:
$("document").ready(function() {
setTimeout(function() {
$("ul.pictures li:nth-child(2)").trigger("click");
},10);
});
The code is triggering the "onclick" event on the li element. You want to trigger the "onclick" event on the "a" element.
$('#gallery li:nth-child(2) a').click();
See jsFiddle
If you are perfoming click action on Li tag , then below code will be helpfull.
<div id="gallery">
<ul class="pictures">
<li><a href="#" data-filter="*" class="active">All</a></li>
<li><a href="#" data-filter=".web">Web</a></li>
<li><a href="#" data-filter=".design">Design</a></li>
<li><a href="#" data-filter=".video">Video</a></li>
</ul>
</div>
setTimeout(function () {
$('.pictures li:nth-child(1)').trigger("click");
}, 10);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With