用jQuery改变图像

Question

I have a little problem with jQuery when I'm trying to save a new row in a table, when action success an image just change but exactly here is my problem.

Here is my code :

$(document).on('click','.clsBtnGuardarHost',function(){
  var i = this.name.substring(14)
  var host = $("#host"+i).val();
  if(host.trim() != "") {
    $.post("AccionesHost.html", { host:$("#host"+i).val(),
      descripcion: $("#descripcion"+i).val(),
      ip: $("#ip"+i).val(),
      cuentasCant: $("#cuentasCant"+i).val(),
      accion:"Agregar" 
    }, function(mensaje) {
      if(mensaje.indexOf(" ") != -1) {
        alert(mensaje)
        return;
      } else {
        $("#indice"+i).val(mensaje);
        $(this).attr( {'id':'btnModificarHost'+i, 'name':'btnModificarHost'+i,});
        $(this).val("");                          
        $(this).removeClass('clsBtnGuardarHost')
          .addClass('btnModificarHost');
        $("#host"+i).removeClass('NclsAnchoTotal')
          .addClass('clsAnchoTotal');
        $("#descripcion"+i).removeClass('NclsAnchoTotal')
          .addClass('clsAnchoTotal');
        $("#ip"+i).removeClass('NclsAnchoTotal')
          .addClass('clsAnchoTotal');
        $("#descripcion"+i).attr('readonly',true)
        $("#ip"+i).attr('readonly',true)
        $("#host"+i).attr('readonly',true);
        $("#cuentasCant"+i).attr('readonly',true);              
      }
    }); 
  } else {
    alert("Debe ingresar un host valido para continuar")
  }     
});

So code in the final "else" works but it doesn't take effect... I don't know why.

Thanks for advance and sorry for my bad English.

Answer 1

this no longer refers to the clicked element. Set a context variable and use that in the callback from the AJAX:

$(document).on('click','.clsBtnGuardarHost',function(){
    var that = $(this);
     //AJAX
    //callback
    that.attr( {'id':'btnModificarHost'+i,
                'name':'btnModificarHost'+i,
            });
    that.val("");