Question

我正在创建一个todo-list应用程序，我在其中使用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);
  });    
});

Answer 1

您可以使用clone方法：

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

Answer 2

因为$("#addMain")的绑定不再存在。如果你再次进行绑定，它应该可以工作，虽然我确信有人会想出一个更好的方法，不再涉及绑定。

Answer 3

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

为什么.prepend（）只能工作一次？

3 个答案: