[Solved] $.on(“click”, function() | does not click. Element is dynamically generated [duplicate]

by


Use event delegation:

$(document).on('click', '.edit', function(){
    //function to edit tasks
    alert("The check was clicked.");
});


var c = $('#c');
$('#add').on('click', function(){

c.append('<span class="edit"><i class="fa fa-pencil" aria-hidden="true"></i> Hello</span>');

});

$(document).on('click', '.edit', function(){
        //function to edit tasks
        alert("The check was clicked.");
});
div {
   margin-top:10px;
}
.edit {
   width:25px;
   height:25px;
   margin: 0px 10px 10px 0px;
   background:#000;
   color:#fff;
   padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="add">Add</button>
<div id="c"></div>

3

solved $.on(“click”, function() | does not click. Element is dynamically generated [duplicate]