Change jQuery mobile button value using setTimeout function

Question

I ran into a very difficult problem due to my little knowledge in jQuery mobile. I researched a lot of solutions and implemented them, but it doesn't seem to work.

• I have a button with the name click me
• When the user presses the button, the button becomes disabled, and the text clickmechanges toplease wait...
• After 2 seconds, the button is activated (no more disabled), and the text changes from please wait...to click me.
• To some extent, I worked. but it's hard for me to grab the correct line of html code to change click meto please wait....
• I am trying to use an example in this jsfiddle file http://jsfiddle.net/nogoodatcoding/ncSbz/1/ , but integrate it into my code setTimeout.

Any help or guidance would be greatly appreciated. My code is below:

html content using jquery mobile

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
    clickme
    <input class="submit button-primary btn large send" id="wp-submit" name="up_submit" tabindex="250" type="button" value="clickme">
</div>

jQuery mobile code

$(document).ready(function () {
    var clicked = false;

    $('#wp-submit').bind('click', function() {
        if(clicked == false) {
            // store reference to the button clicked
            // this allows us to access it within the 
            // setTimeout callback below.
            var $btn = $(this);

            $btn.button('disable');
            $btn.prev('div').find('div.ui-input-btn').text('Please wait...'); // sets the text
            $btn.val('Please wait...'); // sets the text on the button itself
            clicked = true;

            setTimeout(function() { 
                $btn.button('enable'); 
                $btn.prev('a').find('span.ui-btn-text').text('click me');
                $btn.val('click me');
                clicked = false;
            }, 2000); 
        }
    });
});

Answer 1

First instead

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

Use jQM page events like pagecreate:

$(document).on("pagecreate", "#pageid", function () {...

In addition, changing the button text is as simple as updating the input value, and then calling the button (“update”) on the jQM button widget:

$btn.val('Please wait...').button('refresh');

Putting it all together:

$(document).on("pagecreate", "#page1", function () {

    var clicked = false;
    $('#wp-submit').on('click', function() {
        if(clicked == false) {
            var $btn = $(this);
            $btn.button('disable').val('Please wait...').button('refresh');
            clicked = true;

            setTimeout(function() { 
                $btn.button('enable').val('click me').button('refresh');
                clicked = false;
            }, 2000); 
        }
    });

});

Work DEMO

Thie also works in earlier jQM versions: DEMO 1.3