Calling function on click does not work

Question

I am adding a div with some children dynamically. When the user clicks on a .delete-marker div I want to call a function. But for some reason it is not calling anything, and I don't seem to see any errors in the console.

for (var i = 0; i < array.length; i++) {
    $("input[name='commit']").before("<div class='edit-inputs'><input type='text' class='marker-input' name='num[" + i +  "]' id='num[" + i + "]' value=" + array[i]+ " readonly><div class='delete-marker marker-input' style='float: right;'>x</div><br class='marker-input' /></div>");
}

$('.delete-marker').on('click', function() {
    alert();
});

score 1 · Accepted Answer · answered Aug 27 '15 at 15:53

Use delegation for dynamically added elements by using document in the source selector

$(document).on('click','.delete-marker', function() {

    alert();

});

This is effectively capturing all click events occurring within document and executing the handler if the clicked element is of .delete-marker

Calling function on click does not work

1 Answers1