So have some divs on my webpage that I'd like to have some functionality with once clicked, but these divs aren't hard coded into the HTML, they are rendered using javascript as their appearance depends on what is in a database on the backend.
I set a function on click of these divs but absolutely nothing happens. I can't hard code these into the HTML as I need their appearance to be dependent on the database contents.
Here is my code to render the divs:
$.ajax({
method: "GET",
url: "../server-scripts/getTickets.php",
success: function(result) {
var safe = JSON.parse(result);
var tickets = safe["tickets"]
for(i = 0; i < tickets.length; i++) {
var stage = tickets[i]["stage"];
var name = tickets[i]["name"];
var field = "#"+stage;
$(field).append("<div class='deployed-ticket'>"+name+"</div>");
}
}
});
And here is the code which is supposed to happen when you click on one of the divs:
$(".deployed-ticket").click(function() {
alert("Select a column to move the ticket");
});
I look at the developer console in my browser and absolutely nothing, the backend works just fine (tested) and this code for other, hard-coded elements works just fine.
Do I need to use different code in order to manipulate div elements rendered through javascript?
Thanks a lot! Much appreciated