title: why does .prepend() work only once?
body: <p>I'm making a todo-list application, i use jQuery in it and when the user hit the <code>Add</code> button a new task get appended to the <code>tasksWrapper</code> div, but the problem is, it only happen once. When i press the  <code>Add</code> button again, nothing happen. I've checked the DOM tree, still the same with only one <code>mainTaskFrag</code> prepended . Here's my code :</p>
  
  <pre><code>$(function(){
      var mainTaskFrag = $("&lt;div class='wholeTask'&gt;"),
      mainTaskContents = $('&lt;div class="mainTaskWrapper clearfix"&gt;\
                              &lt;div class="mainMarker"&gt;&lt;/div&gt;\
                              &lt;label for="task1"&gt;This is task1&lt;/label&gt;\
                              &lt;div class="holder"&gt;&lt;/div&gt;\
                              &lt;div class="subTrigger"&gt;&lt;/div&gt;\
                              &lt;div class="checkButton"&gt;&lt;/div&gt;\
                              &lt;div class="optTrigger"&gt;&lt;/div&gt;\
                              &lt;div class="mainOptions"&gt;\
                                  &lt;ul&gt;\
                                      &lt;li id="mainInfo"&gt;Details&lt;/li&gt;\
                                      &lt;li id="mainDivide"&gt;Divide&lt;/li&gt;\
                                      &lt;li id="mainEdit"&gt;Edit&lt;/li&gt;\
                                      &lt;li id="mainDelete"&gt;Delete&lt;/li&gt;\
                                  &lt;/ul&gt;\
                              &lt;/div&gt;\
                          &lt;/div&gt;');    
  
    mainTaskFrag.prepend(mainTaskContents);
  
    $("#addMain").on("click", function(){                
        $("#tasksWrapper").prepend(mainTaskFrag);
    });    
  });
  </code></pre>
  
  <p>​</p>