2011-08-29 15 views
8

So che questa domanda è stata fatta prima ma mi sembra di avere un problema diverso da quello che è stato affrontato prima. Ho una tabella e vorrei che ogni riga avesse un collegamento di eliminazione che sfuma la riga della tabella e quindi rimuove la riga della tabella dal DOM. Il mio primo problema è stato che non riuscivo a far funzionare l'effetto jQuery fadeOut sulle righe della tabella e ho scoperto che in realtà devi chiamare fadeOut sugli elementi di td della riga. Quindi, ecco la mia jJavascript:FadeOut e Remove Table Row

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

    return false; 
}); 

L'elemento arco vive all'interno di un td così ho trovato l'elemento tr più vicino quando si fa clic, e poi cadere la funzione fadeOut su ciascuno dei suoi elementi td. Funziona alla grande

Il problema è che nella funzione di callback, "questo" fa effettivamente riferimento all'elemento finestra non al singolo elemento td che era nascosto. Dalla mia comprensione "questo" doveva fare riferimento all'elemento che era sfumato.

Qualche idea?

+2

http://jsfiddle.net/TBMnZ/ Funziona bene per me ... – opatut

risposta

13

Afferra il "presente" di riferimento e passarlo su:

$('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

Penso che questo è quello che stai cercando:

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

EDIT: Penso Opatut is right, come mostrato nel suo jsFiddle .