Jquery ajax no ejecuta el éxito

Estoy enviando requesty por ajax para insert datos en la database. Después del éxito al enviar el post de mi button no cambió. En la prensa, fuego el post Please wait... cuando se dispara el éxito, establezca el nuevo valor html Done . Los loggings en db se crean con éxito, pero el text del button en Done no se modificó.

Mi guion

 var Friend = { // Add new friend add: function() { var btn = $(".btn-add-friend"); btn.click(function() { $(this).html("Please wait..."); $.ajax({ type: "post", url: baseurl + "/FriendRequest/send", data: { friend: $(this).data('friend') }, success: function(xhr, status) { $(this).html("Done"); // Not wortk alert("done"); // <-- Work }, error: function(response, s, e) { alert(response.responseText); }, complete: function () { //. the some from success } }); }); }, // Initialise init: function() { Friend.add(); } }; 

Html:

 <button type="button" id="item-<?=$person->account_id;?>" class="btn btn-xs btn-add-friend has-spinner" data-friend="<?= $person->account_id;?>"><i class="fa fa-plus-circle"></i> Add Friend</button> 

Cuando hago clic en el text del button, se cambia a Please wait.. pero después de que el éxito no cambie a Done y la alerta se ejecuta correctamente.

parece que no es parte de DOM después del clic! También bash con on() el resultado que obtengo.

this dentro de las devoluciones de llamada de la function ajax es … la llamada ajax, no el elemento cliqueado.
Tienes que replacelo con eso

 add: function() { var btn = $(".btn-add-friend"); btn.click(function() { var self = $(this); self.html("Please wait..."); $.ajax({ type: "post", url: baseurl + "/FriendRequest/send", data: { friend: self.data('friend') }, success: function(xhr, status) { self.html("Done"); }, 

Para usar this , necesitas un atributo adicional. Agregue lo siguiente con url

 context:this 

Entonces, el código actualizado será

 $.ajax({ type: "post", url: baseurl + "/FriendRequest/send", context:this, data: { friend: $(this).data('friend') }, success: function(xhr, status) { $(this).html("Done"); // Will work alert("done"); // <-- Work }, error: function(response, s, e) { alert(response.responseText); }, complete: function () { //. the some from success } }); 

Dentro de la callback, esto se refiere al object jqXHR de la llamada Ajax, no al elemento. así que trate de asignarlo a una variable antes de la request ajax, luego use esta variante dentro de la function de éxito:

 //Before ajax request var _this = $(this); //Inside success function _this.html("Done"); 

Espero que esto ayude.