Запуск каждой функции после загрузки содержимого Ajax

Question

У меня есть функция Ajax, которая используется несколько раз. Я использую эту функцию для добавления в событие click для загрузки содержимого в боковой ящик.

$(".link").on("click", function(e) { 
    e.preventDefault();  
    loadSideDrawerContent($(this).attr('href'), 'middle', true, imageSuperZoom); 
    openSideDrawer('middle'); 
}); 

Теперь loadSideDrawerContent простой Ajax вызов, который извлекает содержимое HTML и сохраняет его в течение дел.

Проблема:

Я пытаюсь запустить отдельную функцию, которая работает на готовом() нагрузке, но не тогда, когда содержимое загружается.

$(".link").on("click", function(e) { 
    e.preventDefault();  
    loadSideDrawerContent($(this).attr('href'), 'middle', true, imageSuperZoom); 
    openSideDrawer('middle'); 

    $(document).ajaxComplete(function(){ 
     if (typeof resizeImage == 'function') { 
      console.log('it exists'); 
      resizeImage(); 
     }else{ 
      console.log('it doesnt'); 
     } 
    }); 

}); 

Я пробовал следующее, но у меня нет успеха. Функция существует, но она не срабатывает.

EDIT: функция изменения размера (Примечание: это работает отлично на готовом вызов - только не после загрузки содержимого)

function resizeImage(){ 
    $mage_resize.each(function() { 

     var element = jq(this), 
      src = jq(this).attr('src'), 
      regx = /wid=\d+(\.\d)*/g, 
      currentWidth, 
      newWidth, 
      newSrc = {}; 

     if ($(window).width() > 1824) { 

      sizingMethod(src, regx, currentWidth, newWidth, newSrc, Math.round(2000/2)); 

     } else if (jq(window).width() <= 1824 && jq(window).width() > 1366) { 

      sizingMethod(src, regx, currentWidth, newWidth, newSrc, Math.round(1824/2)); 
     } 

     element.attr('src', newSrc.src); 
    }); 

} 

Answer 1

У вас есть несколько вариантов

Во-первых, это переместить $ajaxComplete из ряда обработчик кликов. Поскольку это глобальный обработчик событий нет необходимости гнезда его внутри другого обработчика событий

$(document).ajaxComplete(function(){ 
     if (typeof resizeImage == 'function') { 
      console.log('it exists'); 
      resizeImage(); 
     }else{ 
      console.log('it doesnt'); 
     } 
}); 


$(".link").on("click", function(e) { 
    e.preventDefault();  
    loadSideDrawerContent($(this).attr('href'), 'middle', true, imageSuperZoom); 
    openSideDrawer('middle'); 

}); 

Если у вас есть какие-либо другие Ajax в странице вы можете добавить условные проверить объект настройки в ajaxComplete или объекте jXHR и только изменение размера в зависимости от условий, таких как адреса, используемого

---

Alternative бы избавиться от ajaxComplete и вызвать resizeImage() внутри AJAX обратного вызова, который используется в loadSideDrawerContent()

Например, если loadSideDrawerContent использует load() как метод АЯКС:

$(element).load(url, function(){ 
    // new html exists now 
    resizeImage(); 
}); 

Есть и другие варианты, а также такие, как создание пользовательских событий и запуск тех, в различных местах в приложении. Обратный вызов настраиваемого события вызовет любые функции.

Или привязать resizeImage() к $(window).on('resize) `и всегда вызывает данное событие

ПРИМЕЧАНИЕ: Ваша коллекция $mage_resize нужно будет redfined, когда новые элементы вставляются. Вы не можете создать кеш элементов, которые еще не существуют.