无法通过ajax更改按钮值

Question

应用后 http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css 和 http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js

无法通过脚本更改按钮的文本$(this).val('new value');

有没有人有类似经历并有解决办法？

可以从FIDDLE试用DEMO

JQUERY：

$(document).ready(function () {
    $('#submit_btn').click(function (e) {
        e.preventDefault();
        $(this).val('Processing ...');
        $.ajax({
            cache: false,
            type: "POST",
            dataType: "json",
            data: $('#form1').serialize(),
            url: "echo/json",
            complete: function (HttpRequest, textStatus) {
                $(this).val('Create');
            }
        });
        return false;
    });
});

HTML：

<form action="call.php" method="POST" id="form1" name="form1">
    <input type="text" name="campname" id="campname">
    <textarea id="longdesc" name="longdesc"></textarea>
    <input type="text" name="vercode" id="vercode" />
    <input type="submit" value="Create" id="submit_btn" />
</form>

Answer 1

你可以试试这个，

 $(".ui-btn-text").text('Processing ...');

代码：

$(document).ready(function () {
  $('#submit_btn').click(function (e) {        
    e.preventDefault();
    $(".ui-btn-text").text('Processing ...');
    $.ajax({
        cache: false,
        type: "POST",
        dataType: "json",
        data: $('#form1').serialize(),
        url: "echo/json",
        complete: function (HttpRequest, textStatus) {
           $(".ui-btn-text").text('Create');
        }
    });
    return false;
   });
});

演示：http://jsfiddle.net/Rz2sJ/4/

Answer 2

当 AJAX 回调运行时，this 作为关键字已经失去了它的上下文。您需要将其分配给变量以保留引用。像这样的：

$(document).ready(function () {
    $('#submit_btn').click(function (e) {
        e.preventDefault();
        var button = $(this);
        button.val('Processing ...');
        $.ajax({
            cache: false,
            type: "POST",
            dataType: "json",
            data: $('#form1').serialize(),
            url: "echo/json",
            complete: function (HttpRequest, textStatus) {
                button.val('Create');
            }
        });
        return false;
    });
});

Answer 3

您正在使用 jQuery Mobile 的 .button() 小部件。 jQuery Mobile 将<button> 转换为 div 以使其焕然一新。

对<button> 或<a> 进行任何更改时，您需要refresh 该元素重新应用样式。

您需要做的就是：

$(".selector").val('Processing ...').button("refresh");

Demo

Answer 4

最终申请$('#button').prev().text('your new text'); 工作。

只是不明白为什么在更改文本之前使用.prev()。