title: jQuery .on() event doesn't work for dynamically added element
body: <p>I'm making a project where a whole div with buttons is being inserted dynamically when user click a button, and inside that div there's a button, which when the user click on it, it does something else, like alerting something for example. </p>
  
  <p>The problem is when i press on that button in the dynamically added div, nothing happens. The event doesn't fire at all.</p>
  
  <p>I tried to add that div inside the HTML and try again, the event worked. So i guess it's because the div is dynamically added.</p>
  
  <p>The added div has a class <code>mainTaskWrapper</code>, and the button has a class <code>checkButton</code>.
  The event is attached using <code>.on()</code> at the end of <code>script.js</code> file below.</p>
  
  <p>Here's my code :</p>
  
  <p><strong>helper_main_task.js :</strong> (that's the object that adds the div, you don't have to read it, as i think it's all about that div being dynamically added, but i'll put it in case you needed to)</p>
  
  <pre><code>var MainUtil = {
      tasksArr : [],
      catArr : ["all"],
      add : function(){       
  
          var MTLabel = $("#mainTaskInput").val(),  //task label  
              MTCategory = $("#mainCatInput").val(), //task category 
              MTPriority = $("#prioritySlider").slider("value"),  //task priority     
              MTContents = $('&lt;div class="wholeTask"&gt;\
                                  &lt;div class="mainTaskWrapper clearfix"&gt;\
                                      &lt;div class="mainMarker"&gt;&lt;/div&gt;\
                                      &lt;label class="mainTaskLabel"&gt;&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="addSubButton"&gt;&lt;/div&gt;\
                                      &lt;div class="mainOptions"&gt;\
                                          &lt;ul&gt;\
                                              &lt;li id="mainInfo"&gt;Details&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;\
                              &lt;/div&gt;');
  
  
          this.tasksArr.push(MTLabel);
  
          //setting label
          MTContents.find(".mainTaskLabel").text(MTLabel);        
  
          //setting category  
          if(MTCategory == ""){
              MTCategory = "uncategorized";
          }
          MTContents.attr('data-cat', MTCategory);
          if(this.catArr.indexOf(MTCategory) == -1){
              this.catArr.push(MTCategory);
              $("#categories ul").append("&lt;li&gt;" + MTCategory +"&lt;/li&gt;");
          }
          $("#mainCatInput").autocomplete("option", "source",this.catArr);
  
          //setting priority marker color
          if(MTPriority == 2){ 
              MTContents.find(".mainMarker").css("background-color", "red");
          } else if(MTPriority == 1){
              MTContents.find(".mainMarker").css("background-color", "black");
          } else if(MTPriority == 0){
              MTContents.find(".mainMarker").css("background-color", "blue");
          }       
  
          MTContents.hide();
          $("#tasksWrapper").prepend(MTContents); 
          MTContents.slideDown(100);
  
          $("#tasksWrapper").sortable({
              axis: "y",
              scroll: "true",
              scrollSpeed : 10,
              scrollSensitivity: 10,
              handle: $(".holder")            
          });
  
      }
  };
  </code></pre>
  
  <p><strong>script.js :</strong> (the file where the .on() function resides at the bottom)</p>
  
  <pre><code>$(function(){
       $("#addMain, #mainCatInput").on('click keypress', function(evt){       
          if(evt.type == "click" || evt.type =="keypress"){
              if((evt.type =="click" &amp;&amp; evt.target.id == "addMain") ||
                  (evt.which == 13 &amp;&amp; evt.target.id=="mainCatInput")){    
                      MainUtil.add();                                             
              }
          }
      });
  
      //Here's the event i'm talking about :
      $("div.mainTaskWrapper").on('click', '.checkButton' , function(){
          alert("test text");
      });
  });
  </code></pre>