On my index page, I have SVG code that opens a popup with the .load method containing some HTML and a close button. I am trying to change the fill attribute of an SVG element on the main page when the close button within the popup is clicked, but I'm not sure if it's possible. The external file being loaded is located in a subfolder.
// Main page code to open the popup
$("#isl1").click(function () {
$("#opdracht").slideDown({
duration: 300,
easing: "easeOutBack"
})
.load("opdrachten/opdracht1.html");
});
// Close button on external html file
$("#close").click(function () {
$("#opdracht").slideUp({
duration: 1000,
easing: "easeInBack"
})
$(this).find('.st7').css('fill', '#ffffff');
});
Although there are no errors, the fill does not change as expected. The code works on the main page, but I was unsure if it would work on a loaded page. Any guidance on how to solve this issue would be greatly appreciated.