[javascript] How to trigger click on page load?

I'm looking for a way to automatically "click" an item when the page loads.

I've tried using

$("document").ready(function() {
    $("ul.galleria li:first-child img").trigger('click');
});

but it doesn't seem to work? However, when I enter $("ul.galleria li:first-child img").trigger('click'); into Firebug's console and run the script, it works.

Can the trigger event be used on load?

This question is related to javascript jquery

The answer is


The click handler that you are trying to trigger is most likely also attached via $(document).ready(). What is probably happening is that you are triggering the event before the handler is attached. The solution is to use setTimeout:

$("document").ready(function() {
    setTimeout(function() {
        $("ul.galleria li:first-child img").trigger('click');
    },10);
});

A delay of 10ms will cause the function to run immediately after all the $(document).ready() handlers have been called.

OR you check if the element is ready:

$("document").ready(function() {
  $("ul.galleria li:first-child img").ready(function() {
    $(this).click();
  });    
});

try this,

$("document").ready(function(){

$("your id here").trigger("click");
});

$(function(){

    $(selector).click();

});

$("document").ready({
    $("ul.galleria li:first-child img").click(function(){alert('i work click triggered'});
}); 

$("document").ready(function() { 
    $("ul.galleria li:first-child img").trigger('click'); 
}); 

just make sure the click handler is added prior to the trigger event in the call stack sequence.

  $("document").ready(function() { 
        $("ul.galleria li:first-child img").trigger('click'); 
    }); 

   $("document").ready({
        $("ul.galleria li:first-child img").click(function(){alert('i fail click triggered'});
    }); 

You can do the following :-

$(document).ready(function(){
    $("#id").trigger("click");
});