El evento jQuery .on () no funciona para el elemento agregado dinámicamente
Estoy creando un proyecto en el que se inserta dinámicamente todo un div con botones cuando el usuario hace clic en un botón, y dentro de ese div hay un botón, que cuando el usuario hace clic en él, hace otra cosa, como alertar algo, por ejemplo.
El problema es que cuando presiono ese botón en la división agregada dinámicamente, no sucede nada. El evento no se dispara en absoluto.
Intenté agregar esa división dentro del HTML y volver a intentarlo, el evento funcionó. Así que supongo que es porque el div se agrega dinámicamente.
El div agregado tiene una clasemainTaskWrapper
, y el botón tiene una clasecheckButton
. El evento se adjunta mediante.on()
al final descript.js
archivo abajo
Aquí está mi código:
helper_main_task.js: (ese es el objeto que agrega el div, no tienes que leerlo, ya que creo que se trata de que se agregue dinámicamente ese div, pero lo pondré en caso de que lo necesites)
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: (el archivo donde reside la función .on () en la parte inferior)
$(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");
});
});