用设定的时间更改 jQuery 移动按钮的值

Question

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

我有一个名为 click me
当用户点击按钮时，按钮变为 disabled，文本 clickme 变为 please wait...
2 秒后按钮被激活（不再是 disabled）并且文本从 please wait... 变回 click me。
我已经在某种程度上发挥了作用。该代码在没有此代码行 $(this).parent('').text('Please wait...'); 的情况下也能正常工作，但请问我如何让它与 please wait....

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

<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

无需使用 jQuery 进行那些 dom 的小操作：

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

});

Answer 2

setTimeout 应该在按钮单击的事件处理程序中。您还必须使用按钮的选择器，因为您将在 setTimeout 回调中丢失 this 的上下文，并将 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); } }); });

工作fiddle：https://jsfiddle.net/7j0rfb56/

~~我不得不稍微更改代码，因为核心 jQuery 不提供 .button 功能（也许这是 jQuery 移动设备专用的）。~~

编辑：我根据您更新的代码改进了我之前的答案：

这里有很多问题，我会尽力解释每一个：

首先，您提供的 HTML 在两个地方包含文本 - 这是故意的吗？按钮上的 value="clickme" 属性将设置按钮文本。您可能希望也可能不希望在 div 标记内立即省略额外的文本。我假设您想在示例中更改两者。
使用 .text() 更改元素的文本也会替换该元素的全部内容。因此，当调用 $(this).parent('').text('Please wait...'); 时，您将用新值替换文本和按钮元素。我建议将您希望更改的文本包装在标签中，这样您就可以调用 .text()。
如前所述，随着上下文的变化，您无法在 setTimeout 回调中通过 $(this) 访问按钮。您必须事先存储对它的引用，以便在回调中使用。

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

Answer 3

非常感谢@ezanker 在这里解决了这个问题 -->

Answer:

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

用设定的时间更改 jQuery 移动按钮的值

Changing the value of a jQuery mobile button with a set time

jquery

jquery-mobile