jQuery ajax this.id undefined

Question

Tengo una lista de elementos que elimino usando AJAX.

Esta lista es una lista simple con divs y cada div como id, de modo que cuando el elemento se elimina de la base de datos, devuelvo true y luego quita la línea.

Aquí mi código:

HTML

<div id="row1"> 
<div>item1</div> 
<div><a href="...">view</a></div> 
<div><a id="1">delete</a></div> 
</div> 

JS

$('.delete').click(function() { 
    if (!confirm('Are you sure you want to delete?')) { 
     return false; 
    } 
    $.ajax({ 
     type: "POST", 
     url: '/delete_record', 
     data: 'id=' + this.id, 
     cache: false, 
     success: function (result) { 
      if (result == 'good') { 
       $('#row' + this.id).remove(); 
      } 
     } 
    }); 
}); 

Por alguna razón el this.id no funciona porque no está definido this.id ... ¿por qué? Tengo id="1" en mi a href.

Answer 1

El presente está utilizando se refiere al objeto ajax porque hay un nuevo ámbito en esa función. Si desea acceder a las variables en todo su alcance, debe declararlas antes de la llamada ajax.

$('.delete').click(function() { 
    if (!confirm('Are you sure you want to delete?')) { 
     return false; 
    } 
    var _this = this; 
    $.ajax({ 
     type: "POST", 
     url: '/delete_record', 
     data: 'id=' + this.id, 
     cache: false, 
     success: function (result) { 
      if (result == 'good') { 
       $('#row' + _this.id).remove(); 
      } 
     } 
    }); 
}); 

Answer 2

intentaremos declarar ante el $.ajax la $this

como:

var $ = esta presente;

y utilice la variable.

$('.delete').click(function() { 
    var $this = this; 

    if (!confirm('Are you sure you want to delete?')) { 
     return false; 
    } 

    $.ajax({ 
     type: "POST", 
     url: '/delete_record', 
     data: 'id=' + $this.id, 
     cache: false, 
     success: function (result) { 
      if (result == 'good') { 
       $('#row' + $yourid).remove(); 
      } 
     } 
}); 
}); 

Answer 3

No veo ningún elemento con una clase de 'eliminar' en su html. Suponiendo que es el enlace de eliminación, debe obtener la identificación con $(this).attr('id') en lugar de this.id.

Answer 4

Su identificación no debe comenzar con un número. Aquí es cómo formular una identificación válida: What are valid values for the id attribute in HTML?

this dentro de su función de devolución de llamada de éxito no se refiere a la this en su función de clic manejador. Así que hay que hacer una referencia a this en su controlador de clic por lo que se puede acceder en su función de devolución de llamada:

$('.delete').click(function() { 
    if (!confirm('Are you sure you want to delete?')) { 
     return false; 
    } 
    var that = this; 
    $.ajax({ 
     type: "POST", 
     url: '/delete_record', 
     data: 'id=' + this.id, 
     cache: false, 
     success: function (result) { 
      if (result == 'good') { 
       $('#row' + that.id).remove(); 
      } 
     } 
    }); 
}); 

Answer 5

$('.delete').click(function() { 
    if (!confirm('Are you sure you want to delete?')) { 
     return false; 
    } 

    var id = this.id; // here is the magic 

    $.ajax({ 
     type: "POST", 
     url: '/delete_record', 
     data: 'id=' + this.id, 
     cache: false, 
     success: function (result) { 
      if (result == 'good') { 
       $('#row' + id).remove(); 
      } 
     } 
    }); 
});