Aggiungi nuova riga della riga dopo la riga corrente utilizzando jQuery

Question

Sto tentando di aggiungere una nuova riga che è il clone della riga corrente. Ho provato il seguente codice. Non viene visualizzato errore, ma non aggiunge righe. Qual è l'errore qui con il mio codice? C'è qualche idea facile alternativa?

 $('input[name="cmdAddRow"]').live('click', function(){ 
      $curRow = $(this).parent('tr'); 
      $newRow = $curRow.clone(true); 
      console.log($newRow); 
      $curRow.after($newRow); 
      console.log('added'); 
     }); 

layout HTML:

<table> 
    <tr> 
     <td><input type="hidden" name="uin" value="xxx"></td> 
     <td><input type="text" name="uname" value=""></td> 
     <td><input type="text" name="uadd" value=""></td> 
     <td><input type="text" name="utel" value=""></td> 
     <td><input type="button" name="cmdAddRow" value="Add"></td> 
    </tr> 
</table> 

Answer 1

$(this).parent('tr') non troverà nulla. L'elemento input sarà all'interno di uno td o di uno th. parent trova solo il genitore immediato dell'elemento, quindi lo confronta con il selettore fornito. Quindi non troverà nulla. Quindi non clonare nulla e inserire il nuovo nulla dopo il vecchio nulla. Forse non sorprende, questo in realtà non fa nulla.

è necessario utilizzare closest, che trova l'elemento più vicino per abbinare un selettore

var $curRow = $(this).closest('tr'); 

Si noti inoltre che si sta utilizzando le variabili globali, dal momento che non si sta usando var (correggo questo nella riga sopra), che probabilmente non vuoi fare. Inoltre, live non è una buona funzione da utilizzare; utilizzare on invece, che fa la stessa cosa con eleganza:

$('#yourTable').on('click', 'input[name="cmdAddRow"]', function() { 
    var $curRow = $(this).closest('tr'), 
     $newRow = $curRow.clone(true); 
    console.log($newRow); 
    $curRow.after($newRow); 
    console.log('added'); 
}); 

Answer 2

uso on invece di live, live è deprecato in quanto ultime versioni di jQuery, il tuo parent() seleziona td elemento, utilizzare 2 parent() metodi o closest('tr'):

$('input[name="cmdAddRow"]').on('click', function(){ 
      $curRow = $(this).parent().parent(); 
      $newRow = $curRow.clone(true); 
      console.log($newRow); 
      $curRow.after($newRow); 
      console.log('added'); 
}); 

http://jsfiddle.net/qVm75/3/

Answer 3

Dovete utilizzare uno $.closest o $.parents invece di $.parent come questo

$('input[name="cmdAddRow"]').live('click', function(){ 
     $curRow = $(this).closest('tr'); 
     $newRow = $curRow.clone(true); 
     console.log($newRow); 
     $curRow.after($newRow); 
     console.log('added'); 
    });​ 

Working Fiddle

E si dovrebbe considerare l'utilizzo di $.on come $ .live è ora deprezzato