Problema com a delegação de eventos - javascript, html

Eu estou tentando clonar uma mesa uma vez que a mesafoi preenchido. Dentro do td eu coloquei algumas tags input e textarea. O problema que tenho é que o conteúdo dentro da tabela não é clonado. Eu tentei usar a delegação de eventos, mas parece que estou fazendo algo errado. Aqui está o JSfiddle, escreva algo dentro da tabela e pressione clone. http://jsfiddle.net/no84bror/2/

  $("#clonetable").on("click","textarea",function(){
var tempTable = $("#masterTable");
var temClone = $("<div/>").append(tempTable.clone()).html();
// alert(temClone);
var rep = temClone.replace("textarea","p");
$("#a").html(rep);
});

Respostas:

Este é um bug jquery - a clonagem profunda não funciona para textareas http://bugs.jquery.com/ticket/3016 Começou como um problema no Firefox, mas é o mesmo no Chrome, aparentemente.

"O comportamento atual é documentado em api.jquery.com e, claro, aqui. Um plugin está disponível para fornecer o comportamento solicitado. O ticket é marcado como patchwelcome, com a ressalva de que consertar esse caso de borda dentro do jQuery causa um impacto de desempenho em 90% do tempo quando não é necessário.

O código a seguir funciona e copia o conteúdo do campo de entrada, mas devido ao bug acima você terá que copiar o conteúdo das textareas por conta própria ou usar o plugin.

$("#clonetable").on("click", function(){
$("#a").html($("#masterTable").clone());
});

você pode tentar usar .clone( [withDataAndEvents][, deepWithDataAndEvents] ), em outras palavras, usando .clone(true, true), mas não faz diferença.

Aqui está o código, incluindo o hack para copiar o conteúdo textarea:

 $("#clonetable").on("click",function(){
$("#a").html($("#masterTable").clone());
var my_textareas     = $("#masterTable textarea").slice(2,4);
var result_textareas = $("#a textarea");

for (var i = 0, l = my_textareas.length; i < l; ++i){
$(result_textareas[i]).val($(my_textareas[i]).val());
}
});