为什么 .prepend() 只工作一次？答案

【问题标题】：why does .prepend() work only once?为什么 .prepend() 只工作一次？
【发布时间】：2012-08-29 15:44:26
【问题描述】：

我正在制作一个待办事项列表应用程序，我在其中使用 jQuery，当用户点击Add 按钮时，一个新任务会附加到tasksWrapper div，但问题是，它只发生一次。当我再次按下Add 按钮时，什么也没有发生。我检查了 DOM 树，仍然只有一个 mainTaskFrag 前置。这是我的代码：

$(function(){
    var mainTaskFrag = $("<div class='wholeTask'>"),
    mainTaskContents = $('<div class="mainTaskWrapper clearfix">\
                            <div class="mainMarker"></div>\
                            <label for="task1">This is task1</label>\
                            <div class="holder"></div>\
                            <div class="subTrigger"></div>\
                            <div class="checkButton"></div>\
                            <div class="optTrigger"></div>\
                            <div class="mainOptions">\
                                <ul>\
                                    <li id="mainInfo">Details</li>\
                                    <li id="mainDivide">Divide</li>\
                                    <li id="mainEdit">Edit</li>\
                                    <li id="mainDelete">Delete</li>\
                                </ul>\
                            </div>\
                        </div>');    

  mainTaskFrag.prepend(mainTaskContents);

  $("#addMain").on("click", function(){                
      $("#tasksWrapper").prepend(mainTaskFrag);
  });    
});

【问题讨论】：

你能用JS Fiddle重现这个问题吗？

标签： jquery events dom prepend

【解决方案1】：

你可以使用clone方法：

$("#addMain").on("click", function(){             
      $("#tasksWrapper").prepend(mainTaskFrag.clone());
});

【讨论】：

嗯，我从没想过，我实际上认为.prepend() 只是复制mainTaskFrag 并添加它。
@Rafael 是的，prepend 不是 clone 对象。

【解决方案2】：

因为与$("#addMain") 的绑定不再存在。如果您再次进行绑定，它应该会起作用，尽管我相信有人会想出一个更好的方法来做到这一点，而无需再次绑定。

【讨论】：

【解决方案3】：

.prepend() 方法将指定的内容作为 jQuery 集合对象中每个元素的第一个子元素插入（要将其作为最后一个子元素插入，请使用 .append()）。

【讨论】：