Question

I’m making a todo-list application, i use jQuery in it and when the user hit the Add button a new task get appended to the tasksWrapper div, but the problem is, it only happen once. When i press the Add button again, nothing happen. I’ve checked the DOM tree, still the same with only one mainTaskFrag prepended . Here’s my code :

$(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

You can use clone method:

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