smidl
@smidl
WordPress-разработчик

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

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

При этом обработчики висят вроде на 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);
  • Вопрос задан
  • 160 просмотров
Решения вопроса 1
Дело в том, что обработчик навешан на существующие элементы, а для того чтобы обработчик обрабатывал и добавленные элементы, необходимо установить обработчик, например на body, пример:

$('body').on('click', '.class', function(){
   
})
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Как вариант можно перенавешивать обработчики событий после завершения аякс-запроса:
$(document).ajaxComplete(function(event, xhr, settings) {
  if (settings.url === "bla-bla.php") {
    $(".my-elem").on("click", function() {
       alert('Clicked!');
    });
  }
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы