Ajax function is never called inside dynamically generated buttons - ajax

Question

This loop generate buttons in my HTML inside an AJAX function.
for( var i = 0; i<len; i++){
var d = new Date(response[i]['date']);
dformat = [d.getDate() + '/' +
(d.getMonth()+1) + '/' +
d.getFullYear() + ' ' +
d.getHours() + ':' +
d.getMinutes()];
console.log(response[i])
var bons = "<tbody>" +
"<th>" + response[i]['id'] + "</th>" +
"<td>" + dformat + "</td>" +
"<td>" + response[i]['poids'] + "</td>" +
"<td>" + response[i]['origine'] + "</td>" +
"<td>" + response[i]['type'] + "</td>" +
"<td>" + response[i]['famille'] + "</td>"
if(response[i]['localisation'] != "Expédié"){
bons = bons + "<td> <input class='evacuate' id='" + response[i]['id'] + "' type='button'" + "value='Evacuer'> </td>"
}else{
bons = bons + "<td>" + response[i]['localisation'] + "</td>"
}
bons = bons + "</tr>" +
"</tbody>"
$("#index").append(
bons
);
}
Then I have another AJAX function which makes every buttons previously generated clickable like :
$(".evacuate").on('click', function(){
console.log("test des boutons")
});
Problem is, the console.log isn't displayed, as if the function is never called. What am I doing wrong here ?

Answer 1

Try this:
$(document).on('click','.evacuate', function(){
console.log("test des boutons")
});

Answer 2

You should define the click event on elements that already exist on the page. So for your situation, select the parent element and then add click event. For example if the element with evacuate class is inside an element with someclass class, this will work:
$(".someclass").on('click', '.evacuate', function(){
console.log("test des boutons")
});
According to your code, you can use tbody tag as parent:
$("tbody").on('click', '.evacuate', function(){
console.log("test des boutons")
});

Answer 3

I don't really understand how this works but thanks to the answers given above I managed to display my console.log.
$(document.getElementsByName).on('click', '.evacuate', function(){
console.log("Test des boutons")
});