Question

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

我有一个名为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

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

工作小提琴：https://jsfiddle.net/7j0rfb56/

~~由于核心jQuery没有提供.button函数（可能这是jQuery mobile特定的），我不得不稍微更改代码。~~

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

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

首先，您提供的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 2

不需要为那些小dom操作使用jQuery：

$(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 3

非常感谢@ezanker在这里解决了这个问题 - ＆gt; Changing button value of a jQuery mobile with a setTimeout function

答案：

$(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移动按钮的值

3 个答案: