Question

让我解释一下我想做什么，我有一个表格行，上面有一个按钮。当用户按下按钮时，它会对Web服务进行ajax调用，并且在成功时我想将按钮上的文本更改为其他内容。

我已尝试在ajax调用之前保存此值，并在成功时将其作为变量传递并尝试更改按钮文本。

这是一个小提琴

http://jsfiddle.net/tonymaloney1971/xgq2uumv/1/

小提琴只是我需要做的事情的想法，它不会运行。

这是我试过的代码

$('#SendEmail').on('click', function () {  
 //save this to var
 var thisContext = this;

 sendEmail(bookingID, function (thisContext) {
     $(thisContext).val("hello");     
 }
});


 function sendEmail(id, onWebServiceSuccess) {
     //var data = JSON.stringify({ 'id': id });
     //webService.jsonPOST("ResendEmail", data, onWebServiceSuccess, onWebServiceFailed);
     return true;
 };

由于

Answer 1

您想要更改属性value。

您可以使用$.attr(attribute, string)：

在jQuery中执行此操作

$('#SendEmail').on( 'click' , function () {   
    $(this).attr( "value" , "hello" );
});

或者，只需使用$.val(string)：

$('#SendEmail').on( 'click' , function () {   
    $(this).val( "hello" );
});

Live demo

Answer 2

SendEmail是一个输入按钮，输入按钮显示它的值属性。因此，您需要更新它的值以更改显示的文本。

 $('#SendEmail').on('click', function () {   
      $(this).val("hello");
  });

DEMO

更新

更改

$('#SendEmail').on('click', function () {  
         //save this to var
         var thisContext = this;            
         sendEmail(bookingID, function (thisContext) {//value of thisContext passed by function call
          $(thisContext).val("hello");  // thisContext is not #SendEmail
});

这里thisContext不会引用#SendEmail。它是一个函数的参数，在调用函数时提供，如果没有提供，那么它将是undefined。

要

$('#SendEmail').on('click', function () { //remove thisContext from parameter as it will be passed by function call //save this to var var thisContext = this; sendEmail(bookingID, function () { $(thisContext).val("hello"); });

Answer 3

这取决于您如何定义按钮的文本值。由于您使用value <input type="button">属性，因此您只需将$(this).text()更改为$(this).val()即可，而是决定使用HTML5＆{39} <button></button>元素，然后继续使用$(this).text()。

$('#SendEmail').on('click', function () {  
    //save this to var
    var thisContext = this;

    sendEmail(bookingID, function (thisContext) {
        $(thisContext).val("hello"); // <---- Using .val()
    } //  <---- You missed this
});

但值得注意的是，Ajax调用本质上是异步的，因此如果您只想在完成后更改按钮的名称，则需要.complete()来调用该名称变化

Answer 4

请检查此fiddle。根据您的问题标题：

＆＃13;

function sendEmail(callback){
    callback();
}

$('#SendEmail').on('click', function () {  
 //save this to var
 var thisContext = this;
 //console.log(thisContext);
    
 sendEmail(function () {
     callback ("4", thisContext);
     console.log(thisContext);   
});
});

function callback(id, context) {
    console.log(id);
    var serverURL = "/echo/json/";
    $.ajax({
        url: serverURL,
        type:"POST",
        success: function(result){
            setTimeout(function(){
                $(context).val("hello");  
                //return true;
            },1000);            
       },
        error: function(error){
        }
    });
 };

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<tbody class="tableBody">
     <tr>
         <td>
             <input type="button" value="Resend Email" id="SendEmail" class="btn btn-success" />
         </td>
     </tr>
</tbody>

＆＃13;

这就是你想要的吗？

成功更改按钮值的Ajax Jquery

4 个答案:

DEMO

更新