Ajax загрузка постов — почему не работают всплывающие окна для загруженных аяксом елементов?

Question

[Антон Середний]

Есть сайт, в котором посты по клику на кнопку грузятся с аяксом. По клику на картинку поста обычного - работает увеличение в попапе, а в постах, загруженных через аякс - нет.

При этом обработчики висят вроде на on();

Не могу понять в чем причина.

Потом кликните по изображению товара и по кнопке заказать - у загруженных аяксом - не работает это все.

Вот так открывается окно всплывающее при клике на заказать:

! 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(){
   
})

Comments

[Антон Середний]

по кнопке "заказать" решился вопрос костылем одним. А вот как быть с фенсибоксом?

Answer 2

[Yustas Alexu]

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

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