0

I'm opening this question because of the problem that came out from a previous one: Dynamically update HTML images from Flask+Ajax. Reassuming, I needed to update my HTML view after a response obtained thanks to AJAX from a Flask entrypoint.

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 problem is that after I update the view, following the same structure as the "original" HTML, all of the CSS linked to the images combined with Jquery effects ( tag) doesn't work anymore (like hover effects, ecc.).

Does anyone have suggestions, or maybe suggest another working way to accomplish the task?

igor
  • 31
  • 5

1 Answers1

1

I think this answer may help with your problem, take a look: https://stackoverflow.com/a/17715303/11388121.

In practice, that's because the HTML you injected after the AJAX function isn't the "original" one that was executed at page loading. Thus, you may need some event delegation.

Simo
  • 117
  • 1
  • 10