events - eliminar - El evento jQuery.on() no funciona para elementos añadidos dinámicamente

on off jquery

Question

Estoy haciendo un proyecto donde todo un div con botones se inserta dinámicamente 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 algo más, como por ejemplo alertar algo.

El problema es cuando presiono ese botón en el div añadido dinámicamente, no pasa nada. El evento no se dispara en absoluto.

Intenté agregar ese div 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 clase mainTaskWrapper , y el botón tiene una clase checkButton . El evento se adjunta utilizando .on() al final del archivo script.js continuación.

Aquí está mi código:

helper_main_task.js: (ese es el objeto que agrega el div, no tiene que leerlo, ya que creo que se trata de que ese div se agregue dinámicamente, pero lo pondré en caso de que lo necesite)

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 la función .on () reside 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");
    });
});

Answer 1

Debe especificar un selector con on (como parámetro) para que se comporte como el antiguo método delegate . Si no lo haces, el evento solo estará vinculado a los elementos que actualmente coinciden con div.mainTaskWrapper (que aún no existe). #tasksWrapper volver a asignar el evento después de agregar los elementos nuevos o agregar el evento a un elemento que ya exista, como #tasksWrapper o el documento en sí.

Consulte "Eventos directos y delegados" en esta página .

Answer 2

No parece que exista div.mainTaskWrapper .

De la documentación (sí, en realidad es negrita):

Los controladores de eventos están vinculados solo a los elementos seleccionados actualmente; deben existir en la página en el momento en que su código realiza la llamada a .on() . Para garantizar que los elementos estén presentes y puedan seleccionarse, realice el enlace de eventos dentro de un manejador de documentos listos para los elementos que están en el marcado HTML en la página.

[...]

Al elegir un elemento que está garantizado para estar presente en el momento en que se adjunta el controlador de eventos delegados, puede utilizar eventos delegados para evitar la necesidad de adjuntar y eliminar con frecuencia los controladores de eventos.

Es posible que desee vincularlo a #tasksWrapper en #tasksWrapper lugar:

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

Answer 3

Sé que esta es una publicación anterior, pero podría ser útil para cualquier otra persona que se encuentre ...

Tu podrías intentar:

jQuery(''body'')on.(''DOMNodeInserted'', ''#yourdynamicallyaddeddiv'', function () {
//Your button click event
});

Aquí hay un ejemplo rápido: https://jsfiddle.net/8b0e2auu/