使用setTimeout函数更改jQuery mobile的按钮值 [英] Changing button value of a jQuery mobile with a setTimeout function

问题描述

由于我对jQuery mobile的了解不足，因此我面临一个非常具有挑战性的问题.我研究了许多解决方案并实施了它们，但似乎没有用

I am facing a very challenging problem due to my little knowledge in jQuery mobile. I have researched many solutions and implemented them but does not seem to work

1. 我有一个名为click me
的按钮
2. 当用户单击按钮时，按钮变为disabled，文本clickme更改为please wait...
3. 2秒钟后，按钮被激活(不再是disabled)，并且文本从please wait...更改回click me.
4. 我已经使它在某种程度上起作用了.但是我发现很难抓住正确的html代码行来将click me更改为please wait....
5. 我正在尝试在此jsfiddle文件中使用示例 http://jsfiddle.net/nogoodatcoding/ncSbz/1/，但将其集成到我的setTimeout代码中.

1. I have a button called click me
2. When a user clicks on the button, the button becomes disabled and the text clickme changes to please wait...
3. After 2 seconds the button become activated (no longer disabled) and the text changes from please wait... back to click me.
4. I have gotten it to work to some extent. but i am finding it difficult to grab the right html code line in order to change click me to please wait....
5. i am trying to use the example in this jsfiddle file http://jsfiddle.net/nogoodatcoding/ncSbz/1/ but integrate it within my setTimeout code.

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

Any help or guidance will be much appreciated. My code is below:

jquery mobile的html内容

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移动代码

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

推荐答案

首先，而不是

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

使用jQM页面事件，例如pagecreate:

Use the jQM page events like pagecreate:

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

除此之外，更改按钮文本就像更新输入值然后在jQM按钮小部件上调用button("refresh")一样容易:

Other than that, changing the button text is as easy as updating the value of the input and then calling button("refresh") on the jQM button widget:

$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

Thie also works in earlier versions of jQM: DEMO 1.3

这篇关于使用setTimeout函数更改jQuery mobile的按钮值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！