href vs scripted page transitions and button highlighting

Question

I am building a number of jQuery Mobile SPAs along with knockout.js and in general having great success. I did notice what is mostly a cosmetic issue an now hope to solve it.

Anchor tags that link via href produce a nice button highlight (in blue for the default theme) affect during a page transition but navigation via knockout's click binding / $.mobile.changePage produces no such highlight. I realize this likely has nothing to do with knockout.

Is there any general purpose way that scripted page transitions could be made to work the same way? I have a large number of click bindings given my use of knockout.

<div id="page1" data-role="page">
    <div data-role="content">   
        <h1>Page 1</h1>
        <a href="#page2" data-role="button">
                Page 2 via href (with highlight)</a>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="content">   
        <h1>Page 2</h1>
        <a data-role="button"
            onclick="$.mobile.changePage('#page3');">
               Page 3 via script (no highlight)</a>
    </div>
</div>

<div id="page3" data-role="page">
    <div data-role="content">   
        <h1>Page 3</h1>
    </div>
</div>

Answer 1

This problem is not yet fixed apparently. changePage function for some reason interferes with button styling. This was also a problem with a navbar and changepage when I was creating my last app.

You can solve it with a little jQuery fix, you will find everything in my example:

$('#index').live('pagebeforeshow',function(e,data){  
    $('#custom-highlight').live('click', function(e) {
        $(this).addClass("ui-focus ui-btn-active");
        setTimeout(function(){$.mobile.changePage('#second');},50)
    });
});


$("[data-role=page]").live('pagebeforeshow', function (e,data) {
    data.prevPage.find('#custom-highlight').removeClass("ui-focus ui-btn-active");
});

To adjust example to your needs use .each( on every a element with custom class name. Timeout function is a necessity, without it changePage would trigger before styles can be applied. You can play a bit with timeout. Sometimes, if you lower it changePage will trigger before styles are applied.

You want see this problem on a buttons with href because they already have a slight delay.