事件委托问题

Question

一旦 table 被填充，我正在尝试克隆 table。在 td 中，我放置了一些 input 和 textarea 标签。我遇到的问题是 table 中的内容没有被克隆。我曾尝试使用事件委托，但似乎我做错了什么。这是 JSfiddle，在 table 中写一些东西，然后按克隆。`` 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);
    });

Answer 1

这是一个 jquery 错误 - 深度克隆不适用于文本区域 http://bugs.jquery.com/ticket/3016 它最初是 Firefox 中的一个问题，但显然在 Chrome 中也是如此。

"The current behavior is documented at api.jquery.com and of course here. A plugin is available to provide the requested behavior. The ticket is marked patchwelcome, with the caveat that fixing this edge case inside jQuery causes a performance hit for the 90% of the time when it isn't needed."

以下代码可以正常工作并复制输入字段的内容，但由于上述错误，您将不得不自己复制文本区域的内容或使用插件。

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

您可以尝试使用 .clone( [withDataAndEvents][, deepWithDataAndEvents] )，换句话说，使用 .clone(true, true)，但这没有什么区别。

这是代码，包括复制文本区域内容的技巧：

 $("#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());
    }
 });

事件委托问题

Issue with event delegation

html

javascript