事件 – jQuery .on()事件不适用于动态添加的元素

我正在制作一个项目，当用户点击一个按钮时，动态地插入一个带有按钮的整个div，在该div内部有一个按钮，当用户点击它时，它会执行其他操作，例如提醒某些内容。

问题是当我在动态添加的div中按下该按钮时，没有任何反应。事件根本不触发。

我试图在HTML中添加该div，然后重试，该事件工作。所以我想这是因为div被动态添加。

添加的div有@L_60_0@mainTaskWrapper类，该按钮有一个类checkButton。
事件在下面的script.js文件的末尾使用.on()附加。

这是我的代码：

Helper_main_task.js :(这是添加div的对象，你不必阅读它，因为我认为这是关于该动态添加的div，但是如果你需要的话)

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")            
        });

    }
};

script.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");
    });
});

$("#tasksWrapper").on('click',function(){
    alert("test text");
});