jQuery .auf() Ereignis funktioniert nicht für dynamisch hinzugefügte element

Mache ich ein Projekt, wo eine ganze div mit buttons, wird dynamisch eingefügt, wenn der Benutzer auf eine Schaltfläche klicken, und innerhalb dieses div-es gibt eine Schaltfläche, die, wenn der Benutzer klicken Sie auf es, es macht noch etwas anderes, wie die Alarmierung etwas zum Beispiel.

Das problem ist, wenn ich drücken Sie auf die entsprechende Schaltfläche in der dynamisch Hinzugefügt, div, passiert nichts. Das Ereignis nicht Feuer überhaupt.

Habe ich versucht, hinzuzufügen, dass div im HTML-Code und versuchen Sie es erneut, in der Veranstaltung gearbeitet. Also ich denke, es ist, weil der div wird dynamisch Hinzugefügt.

Den zusätzlichen div-Element hat eine Klasse mainTaskWrapperund der button hat ein Klasse checkButton.
Die Veranstaltung ist befestigt mit .on() am Ende script.js - Datei unten.

Hier ist mein code :

helper_main_task.js : (das ist das Objekt, fügt das div, die Sie nicht haben, um es zu Lesen, da ich denke, es geht darum, dass div wird dynamisch Hinzugefügt, aber ich werde es in Fall, dass Sie benötigt, um)

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 : (die Datei, wo die .auf () - Funktion befindet sich an der Unterseite)

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

InformationsquelleAutor der Frage Rafael Adel | 2012-08-30