$ .mobile.changePage不加载CSS

Question

This is a very weird situation with ajax. I have a login page which calls the mainpage via ajax, like this:

 // Function to call WCF  Service - Infrastructure       
    function CallService() {
        $.ajax({
            type: Type, //GET or POST or PUT or DELETE verb
            url: Url, // Location of the service
            data: Data, //Data sent to server
            contentType: ContentType, // content type sent to server
            dataType: DataType, //Expected data format from server
            processdata: ProcessData, //True or False
            success: function (msg) {//On Successfull service call
                ServiceSucceeded(msg);
            },
            error: ServiceFailed// When Service call fails
        });
    }

    function ServiceSucceeded(result) {

        if (DataType == "json") {
            var resultText = result;
            if (resultText.result == "True") {
                $.mobile.changePage("MainMenu.aspx",{ transition: "slideup" });
            }
            else {
                //Show Error Message
            }
        }
    }

In every page I have a reference to an js called "general.js" which contains the following code:

function processMenu(menuOptions) {
var options = menuOptions.split('');
var currentOptions = '1234567'.split('')

for (i = 0; i < currentOptions.length; i++) {
    var index = (i + 1) + '';
    if (options.indexOf(index) < 0) {
        var op = $('#op' + currentOptions[i]);
        op.attr('disabled', true);
        op.addClass('btndisabled');
        $(op).live("click", function (event) {
            //do stuff
            event.preventDefault(); // Prevent default link behaviour
        });
    }
}

}

This code verifies some numbered controls and enable a CSS called "btndisabled" if it's requiered

The "btndisabled" CSS is:

.btndisabled{    
    background-color: rgb(236,233,216);
    color: #CCC;
    font-style: normal;
}

Ok the situation is, when I use

$.mobile.changePage("MainMenu.aspx?",{ transition: "slideup" });

The Login.aspx content changes to the MainMenu.aspx content and the js:

op.attr('disabled', true);
op.addClass('btndisabled');
$(op).live("click", function (event) {
    //do stuff
    event.preventDefault(); // Prevent default link behaviour
});

is executed, the CSS is not applied BUT the "event.preventDefault" is executed. I need to apply the CSS but I don't what is wrong. Any ideas?

UPDATE

Watching the behaviour of the object on postback and in ajax call I realized something quite intersting, but I don't know what to think about it.

On Postback

Look at the HTMLAnchorElement

Ajax

If the DOM has not loaded the anchor object, HOW IS POSSIBLE TO ASSIGN THE event.preventDefault()???

This is crazy...

Answer 1

Your answer is probably on the jQuery Mobile forum itself:

http://forum.jquery.com/topic/mobile-css-gets-lost-after-using-ajax-to-update-content