使用 setTimeout 函数更改 jQuery 手机的按钮值

Question

由于我对 jQuery 移动设备知之甚少，我面临着一个非常具有挑战性的问题。我研究了很多解决方案并实施了它们，但似乎没有用

我有一个名为 click me
当用户点击按钮时，按钮变为 disabled，文本 clickme 变为 please wait...
2 秒后按钮被激活（不再是 disabled）并且文本从 please wait... 变回 click me。
我已经在一定程度上发挥了作用。但我发现很难找到正确的 html 代码行以将 click me 更改为 please wait....
我正在尝试使用此 jsfiddle 文件 http://jsfiddle.net/nogoodatcoding/ncSbz/1/ 中的示例，但将其集成到我的 setTimeout 代码中。

任何帮助或指导将不胜感激。我的代码如下：

html content by 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

首先，而不是

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

使用 jQM 页面事件，如 pagecreate：

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

除此之外，更改按钮文本就像更新输入值然后调用 jQM 按钮小部件上的按钮 ("refresh") 一样简单：

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

综合起来：

$(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); 
        }
    });

});

Working DEMO

Thie 也适用于早期版本的 jQM：DEMO 1.3

使用 setTimeout 函数更改 jQuery 手机的按钮值

Changing button value of a jQuery mobile with a setTimeout function

html

jquery

jquery-mobile