如何更改ajax成功函數中單擊事件處理程序中的按鈕的文本

Question

我通常爲自己弄清楚事情，但這一次給了我一個非常困難的時間。我需要在點擊一個數據庫後，改變由php創建的表中的按鈕的文本值。

 <td id="order_num"><?php echo $order -> order_num; ?></td> 
     <td><?php echo $order -> data; ?></td> 
     <td><?php echo $order -> data; ?></td> 
     <td><?php echo $order -> data; ?></td> 
     <td><?php echo $order -> data; ?></td> 
     <td><?php echo $order -> data; ?></td> 
     <td><?php echo $order -> data; ?></td> 
     <td><?php echo $order -> data; ?></td> 

     <!-- **** this is the button. ******** -->   
     <td><button type="submit" class="accept_order" id ="row_<?php echo $order -> order_num; ?>" 
     data-row_id = "row_<?php echo $order -> order_num; ?>" data-current_user = "<?php echo $user_id; ?>" 
     data-order_num = "<?php echo $order -> order_num; ?>">Accept</button> 

這裏是一個Ajax調用

$（文件）。就緒（函數（）{ $（ '店 '）的大混亂。在（' 點擊' ，「按鈕」，功能（E）{

 var button = $(this).find('button'); //trying to put the value of the current button in a variable to pass to the ajax function.           
     var current_user = $(this).closest('.shop').find('.accept_order').data('current_user'); 
     console.log(current_user); 
     var row_id = $(this).closest('.shop').find('.accept_order').data('row_id'); 


     var accepted_order = $(this).closest('.shop').find('.accept_order').data('order_num'); 
     console.log(accepted_order); 
     e.preventDefault(); 

     $.ajax('url', { 
      type: "POST", 

      data: { order_id: accepted_order, user_id: current_user }, 
      success: function(msg){ 
       console.log(msg); 
       console.log(this); 
       //change the text of the button to something like "accepted" 

       ***************this is where I have problems *********************** 
       $(this).html('accepted'); or 
       $(this).closest('.shop').find('button').html(msg); or 
       button.text(msg); 



      }, 
      error: function(){ 
       $(this).closest('.shop').find('.accept_order').html("failure"); 
      } 
     }); 


    }); 
}); 

</script> 

我確實使用了$（「按鈕」）HTML（MSG）; 但改變了所有的按鈕好像我失去範圍的OB當成功功能內部的時候。任何想法或幫助將不勝感激。提前致謝。

Answer 1

我相信我發現你的問題來源，但我不確定。並且問題來自this關鍵字，因爲this在ajax函數中直接指向ajax對象而不是按鈕節點對象。因此，您可以在成功和錯誤功能中使用bind函數使this指向按鈕。這裏是修改：

和另一件事在ajax函數中的url是一個變量而不是你上面寫的字符串。

$.ajax(url, { 
     type: "POST", 
     data: { order_id: accepted_order, user_id: current_user }, 
     success: function(msg){ 
      console.log(msg); 
      console.log(this); 
      //change the text of the button to something like "accepted" 

      ***************this is where I have problems *********************** 
      $(this).html('accepted'); or 
      $(this).closest('.shop').find('button').html(msg); or 
      button.text(msg); 



     }.bind(this), 
     error: function(){ 
      $(this).closest('.shop').find('.accept_order').html("failure"); 
     }.bind(this) 
    }); 

我不知道從解決方案，因爲沒有演示你問什麼。

我希望它有效。

Answer 2

也許你可以使用類選擇按鈕

$.ajax('url', { 
     type: "POST", 

     data: { order_id: accepted_order, user_id: current_user }, 
     success: function(msg){ 
      console.log(msg); 
      console.log(this); 
      //change the text of the button to something like "accepted" 

      ***************this is where I have problems *********************** 
      $("button.accept_order").html(msg); 



     }, 
     error: function(){ 
      $(this).closest('.shop').find('.accept_order').html("failure"); 
     } 
    }); 

或破越好..

var button = $(this); 

和你的Ajax調用內只需使用：

button.html(msg);