на jQuery.событий On() не работает для динамически добавленных элементов

Я делаю проект, где целый div с кнопками вставляется динамически, когда пользователь нажимает кнопку, и внутри этого div есть кнопка, которая, когда пользователь нажимает на нее, делает что-то еще, например, предупреждая что-то, например.

проблема в том, что когда я нажимаю на эту кнопку в динамически добавленном div, ничего не происходит. Мероприятие вообще не срабатывает.

Я попытался добавить этот div внутри HTML и повторить попытку, событие сработало. Так что, думаю, это ... потому что div динамически добавляется.

добавленный div имеет класс mainTaskWrapper, и кнопка имеет класс checkButton. Событие прикрепляется с помощью .on() в конце ниже.

вот мой код:

helper_main_task.js: (это объект, который добавляет div, вам не нужно его читать, так как я думаю, что все дело в том, что div динамически добавляется, но я положу его в случае, если вам нужно to)

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 = $('<div class="wholeTask">
                                <div class="mainTaskWrapper clearfix">
                                    <div class="mainMarker"></div>
                                    <label class="mainTaskLabel"></label>
                                    <div class="holder"></div>
                                    <div class="subTrigger"></div>
                                    <div class="checkButton"></div>
                                    <div class="optTrigger"></div>
                                    <div class="addSubButton"></div>
                                    <div class="mainOptions">
                                        <ul>
                                            <li id="mainInfo">Details</li>
                                            <li id="mainEdit">Edit</li>
                                            <li id="mainDelete">Delete</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>');


        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("<li>" + MTCategory +"</li>");
        }
        $("#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")            
        });

    }
};

сценарий.js: (файл, в котором .функция on () находится внизу)

$(function(){
     $("#addMain, #mainCatInput").on('click keypress', function(evt){       
        if(evt.type == "click" || evt.type =="keypress"){
            if((evt.type =="click" && evt.target.id == "addMain") ||
                (evt.which == 13 && evt.target.id=="mainCatInput")){    
                    MainUtil.add();                                             
            }
        }
    });

    //Here's the event i'm talking about :
    $("div.mainTaskWrapper").on('click', '.checkButton' , function(){
        alert("test text");
    });
});