Change jQuery mobile button value with set time

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. The code works without this line of code $(this).parent('').text('Please wait...');, but one could kindly tell how I can get it to work with please wait....

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

<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>

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

    $('#wp-submit').bind('click', function() {
        if(clicked == false) {
            $(this).button('disable');
            $(this).parent('').text('Please wait...');
            clicked = true;

            setTimeout(function() { 
                $('#wp-submit').button('enable'); 
                $(this).parent('').text('click me');
                clicked = false;
            }, 2000); 
        }
    });       
});

Answer 1

@ezanker, → jQuery mobile setTimeout

:

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

Answer 2

setTimeout . , this setTimeout, clicked false:

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

    $('#wp-submit').bind('click', function() {
        if(clicked === false) {
            $(this).button('disable');
            $('#wp-submit .ui-btn-text').val("Please wait...");
            clicked = true;

            setTimeout(function() { 
                $('#wp-submit').button('enable'); // 'this' no longer refers to button element
                $('#wp-submit .ui-btn-text').val("clickme");
                clicked = false;
            }, 2000); 
        }
    });       
});

: https://jsfiddle.net/7j0rfb56/

, ​​jQuery .button (, jQuery ).

---

EDIT: :

, , :

• -, HTML - ? value="clickme" . div. , .
• .text() . $(this).parent('').text('Please wait...'); , . , , , .text().
• , $(this) setTimeout . , .

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

$(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.siblings('label').text('Please wait...'); // sets the text for the label only
            $btn.val('Please wait...'); // sets the text on the button itself
            clicked = true;

            setTimeout(function() {
                // we can access our '$btn' variable inside
                // here, this avoids the issue of 'this'
                // losing context
                $btn.button('enable'); 
                $btn.siblings('label').text('click me');
                $btn.val('click me');
                clicked = false;
            }, 2000); 
        }
    });
});

jsfiddle: https://jsfiddle.net/vsdv9ghL/ ( , jQuery-mobile).

Answer 3

No need to use jQuery for these small fraction manipulations:

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

  $('#wp-submit').bind('click', function() {
    button = this; // storage your button here
      if(clicked === false) {
          button.disabled = true;
          button.value = "Please wait...";
          clicked = true;
          console.log('disabled');
        setTimeout(function() { // link your timeout with the click event
          console.log('enabled');
          clicked = false;
          button.disabled = false;
          button.value = "clickme";
        }, 2000);
      } 
  });

});