I have a really lightweight Single Page App with a common header+footer and a dynamic middle piece. In one view of this middle piece is a dynamic table where the final column has a "confirm" button in it. If this is the first view loaded, clicking the button creates a proper function call. If it's been swapped in after the first full page load, the function in my core javascript isn't called.
I'm using the following to inject an HTML template post-page-load
$('#view2_button').click(function() {
$.get("/view2", function(data, status) {
document.getElementById("mainview").innerHTML = data;
});
});
And here is the javascript for the "confirm" buttons which are in a dynamic table in the partial view "view2." Again, this code works exactly as intended if "view2" is the first partial view rendered upon loading the app.
$('td.confirm').click(function() {
toggleOverlay();
const confirmId = this.id.split('_')[1];
if(confirm( 'By clicking OK, you are confirming:\n'
//...
//...
});
Is the only solution to this to embed "OnClick()" into the button div itself, or is there a proper way to keep the code separate from the markup without having to rely on something as heavy as Angular, React, or Vue?
