Question

Here is my current setup.

I have two pages running on the jquery mobile framework.

• index.php
• article.php

In bother headers I have a js file called ratings.

here is my js ratings.js:

$(document).ready(function(){
    $("#rating_1").click(function () {
        $("#rating_2").css('backgroundPosition', '0px 0px');
        $(this).css('backgroundPosition', '-45px 0px');
    }); 
}); 

When I load index.php and then go to article.php none of my triggers to ratings.js work.

If I add rel="external" or data-ajax="false" my triggers work.
However then I lose the ability to have my loader wheel come up.

Any suggestions?

Thanks!

Answer 1

Important: Use $(document).bind('pageinit'), not
$(document).ready()

The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as
the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.

• http://jquerymobile.com/demos/1.1.0/docs/api/events.html

Try:

$(document).bind('pageinit', function() {
    $("#rating_1").click(function() {
        $("#rating_2").css('backgroundPosition', '0px 0px');
        $(this).css('backgroundPosition', '-45px 0px');
    }); 
});