click event doesn't change the css of the clicked anchor

Question

In my document, I have a nav bar:

<div data-role="navbar">
    <ul>
       <li><a href="#allfreebies" data-ajax="false" class="right-link-icon" id="first-link-to-select">All freebies</a></li>
       <li><a href="#favorite" data-ajax="false" class="left-link-icon">Favorite Freebies</a></li>
         </ul>
</div><!--navbar-->

Each link, when clicked on, has a nice css which get applied (blue border and white background color).

Now I am trying to fire the click event programmatically on the window load :

window.onload = function(){
  $("#first-link-to-select").click();
}

Once my document finished loading, I notice the blue border is getting applied on the link, but not the white background color. Is this the wrong event to call ? Am I missing anything ?

Fiddle please... also, are you taking into account the [alternative document ready event for jQuery mobile?](http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events) — scrowler, Sep 01 '14 at 22:55

score 0 · Answer 1 · answered Sep 01 '14 at 22:59

First of all I assume you're using jQuery and jQuery is loaded in your project. Second of all, windows.load is used in JavaScript a lot rather than in jQuery and thirdly I think you should define a function within a click like below and do something with your #first-link-to-select inside it:

jQuery(document).ready(function($) {
$("#first-link-to-select").click(function($) {
        //Your code
    });
});

score 0 · Answer 2 · answered Sep 02 '14 at 13:01

You should use the jQuery Mobile Page Events instead of window onload. See Omar's article here: http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/

For yours, you could use either pagecreate or pagebeforeshow if you always want the same link active when navigating to the page:

$(document).on("pagecreate", "#pageid", function(){
    $("#first-link-to-select").click();
});

or

$(document).on("pagebeforeshow", "#pageid", function(){
    $("#first-link-to-select").click();
});

click event doesn't change the css of the clicked anchor

2 Answers2