2011-08-29 14 views
8

Sé que esta pregunta se ha hecho antes, pero parece que tengo un problema diferente del que se ha abordado anteriormente. Tengo una tabla y me gustaría que cada fila tenga un enlace de eliminación que desvanece la fila de la tabla y luego elimina la fila de la tabla del DOM. Mi primer problema fue que no pude hacer que el efecto jQuery fadeOut funcionara en las filas de la tabla y encontré que debes llamar a fadeOut en los elementos td de la fila. Por lo tanto, aquí está mi jJavascript:FadeOut y eliminar la fila de la tabla

$('span.deleteItem').live('click', function() { 
    $(this).closest('tr').find('td').fadeOut('fast', 
     function(){ 
      $(this).parents('tr:first').remove();      
     });  

    return false; 
}); 

El elemento span vive dentro de un td, así que encontrar el elemento tr más cercano cuando se hace clic, y luego caer la función fadeOut en cada uno de sus elementos td. Esto funciona genial

El problema es que en la función de devolución de llamada, 'esto' está haciendo referencia al elemento ventana no al elemento td individual que estaba oculto. Desde mi entendimiento, 'esto' se suponía que hacía referencia al elemento que se desvaneció.

¿Alguna idea?

+2

http://jsfiddle.net/TBMnZ/ Funciona bien para mí ... – opatut

Respuesta

13

Coge el "presente" de referencia y dárselo:

$('span.deleteItem').live('click', function() { 
    var here = this; 
    $(this).closest('tr').find('td').fadeOut('fast', 
     function(here){ 
      $(here).parents('tr:first').remove();      
     });  

    return false; 
}); 
5

Creo que esto es lo que busca:

$('span.deleteItem').live('click', function() { 
    var tableRow = $(this).closest('tr'); 
    tableRow.find('td').fadeOut('fast', 
     function(){ 
      tableRow.remove();      
     } 
    ); 
}); 

EDIT: Creo Opatut is right, como se muestra en su jsFiddle .

Cuestiones relacionadas