59

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?

Justine
  • 1,808
  • 5
  • 26
  • 36
  • It should work, unless the element is added later. Can you post a demo? (Try http://jsbin.com) – SLaks Jan 13 '10 at 20:34
  • Can you post the scenario where you want to do this? Sounds like obtrusive javascript – Perpetualcoder Jan 13 '10 at 20:38
  • Where is your `click` handler added? – SLaks Jan 13 '10 at 20:40
  • http://dev.gentlecode.net/blossomsoft/portfolio-single.html It uses a jQuery Galleria plugin (http://devkick.com/lab/galleria/) to create a gallery from an unordered list of images. I'm trying to fire off the big image on page load instead of having to click on the thumb. – Justine Jan 13 '10 at 20:49
  • And here is my scripts file: http://dev.gentlecode.net/blossomsoft/js/scripts.js – Justine Jan 13 '10 at 20:54

5 Answers5

135

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();
  });    
});
Özkan
  • 3
  • 2
noah
  • 21,289
  • 17
  • 64
  • 88
  • Nice. It's odd that it's running in order and still misses the declaration by a hair. This solved it for me. – Robert McMahan Nov 23 '15 at 17:15
  • Your answer helped me in this question: http://stackoverflow.com/questions/39215964/why-window-load-isnt-working-when-the-request-comes-from-outside-the-page-but/ Very much appreciated. – Luis Aug 30 '16 at 04:07
  • Appreciated first of all. But why the second solution (check if the element is ready) is not working. Can you explain a little bit more? Thank you :] – hayley Sep 22 '21 at 05:39
7
$(function(){

    $(selector).click();

});
Steven
  • 17,796
  • 13
  • 66
  • 118
  • 2
    API reference: http://docs.jquery.com/Events/click. Note that `$(callback)` is equivalent to `$("document").ready(callback);` – Steven Jan 13 '10 at 20:35
  • 1
    Same effect - works in Firebug, but when entered to my scripts file, it doesn't. Firebug doesn't give any errors as well. Does it matter there are other scripts in the file in $(function() { .. }); as well? – Justine Jan 13 '10 at 20:36
6
$("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'});
    }); 
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
2

You can do the following :-

$(document).ready(function(){
    $("#id").trigger("click");
});
Krish Bhanushali
  • 170
  • 1
  • 1
  • 8
0

try this,

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

$("your id here").trigger("click");
});
user229044
  • 232,980
  • 40
  • 330
  • 338