jquery - 为什么 .prepend() 只工作一次？

Question

我正在制作一个待办事项列表应用程序，我在其中使用 jQuery，当用户点击Add按钮时，一个新任务会附加到tasksWrapperdiv 中，但问题是，它只发生一次。当我再次按下 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);
  });    
});

​</p>

Answer 1

您可以使用clone方法：

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

Answer 2

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

Answer 3

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