Ajax loading posts - why don't pop-ups work for elements loaded by ajax?

Question

JavaScript

There is a site in which posts are loaded by clicking on the button with Ajax. By clicking on the image of a regular post, the zoom in the popup works, but not in the posts loaded via Ajax.

At the same time, the handlers hang like on on ();

I can't understand what is the reason.

Then click on the product image and on the order button - for those loaded with Ajax - all this does not work.

This is how the pop-up window opens when you click on the order:

! function(e) {
    var t = {
        target: "self",
        background: "blue"
    };
    e.fn.aspectus = function(c) {
        function n() {
            f = (document.documentElement.clientWidth - s) / 2, u = (document.documentElement.clientHeight - l) / 2, e(o).css({
                left: f,
                top: u
            })
        }

        function i() {
            e("body").append('<div class="scf-overlay"></div>'), o.append('<div class="scf-close">&#215;</div>')
        }
        var o, d, s, l, f, u;
        return d = e.extend({}, t, c), this.on("click", function(t) {
            t.preventDefault, o = e(e(this).attr("href")), s = o.width(), l = o.height(), n(), i(), o.show()
        }), e(window).resize(n), e("body").on("click", ".scf-overlay", function(t) {
            e(".scf-overlay").hide(), o.hide()
        }), e("body").on("click", ".scf-close", function(t) {
            e(".scf-overlay").hide(), o.hide()
        }), this
    }
}(jQuery);

Answer 1

Дело в том, что обработчик навешан на существующие элементы, а для того чтобы обработчик обрабатывал и добавленные элементы, необходимо установить обработчик, например на body, пример:

$('body').on('click', '.class', function(){
   
})

Answer 2

Как вариант можно перенавешивать обработчики событий после завершения аякс-запроса:

$(document).ajaxComplete(function(event, xhr, settings) {
  if (settings.url === "bla-bla.php") {
    $(".my-elem").on("click", function() {
       alert('Clicked!');
    });
  }
});