This question is being opened to address a problem that arose from a previous query found here: Dynamically update HTML images from Flask+Ajax. To summarize, I needed to refresh my HTML view after receiving a response via AJAX from a Flask endpoint.
HTML
<ul>
{% for image in list%}
<li>
<img src="{{image}}" height="150" width="150"></img>
</li>
{% endfor %}
</ul>
AJAX function
$.ajax({
url: "/...",
type: "POST",
dataType: 'json',
data: {...},
success: function(resp){
$("ul").children().remove();
for (var i = 0; i < resp.length; i++) {
var elem = "<li><img src=" + resp[i] + "></li>";
$("ul").append(elem);
}
}
});
The issue arises after updating the view following the original HTML structure. All of the CSS related to the images, along with any JQuery effects (such as hover effects), cease to work correctly.
Does anyone have any suggestions on how to resolve this issue? Alternatively, would you recommend a different method to achieve the same task effectively?