jQuery getScript() + load() загруженный контент не работает

Question

У меня есть документ с пятью кнопками. Под этим рядом кнопок я создаю заполнитель div, Когда я нажимаю на кнопку, я использую load() загрузить в заполнитель div с другой страницы (каждая кнопка загружает кусок HTML в заполнитель div).

Хорошо, моя проблема в том, что фрагменты, которые я загружаю в заполнитель, являются слайд-шоу (anythingslider). И они не работают, даже если у меня есть другое слайд-шоу на главной странице со всеми соответствующими CSS и JS, уже загруженными.

Насколько я узнал, мне нужно использовать getScript() но я все еще не понимаю этого. Нужно ли заново загружать соответствующие сценарии?

Заранее благодарю за любую помощь - К

Answer 1

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

$('div#placeholder1').load('content.html', function() {
  // target the loaded div, find the slider and initialize it
  $('div#placeholder1').find('ul.slider').anythingSlider({ /* options */ });
});

Answer 2

Похоже, вы загружаете html на свою страницу, но не создаете экземпляр слайдера после этого. Загрузка html с другой страницы не приведет к переносу объектов JS, запущенных на другой странице.

Answer 3

У меня такая же проблема с загруженным контентом через .load() для всех моих сценариев я использую загруженный контент.

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

Как я могу это исправить в целом?

РЕДАКТИРОВАТЬ:

Просто нашел ответ:

$(document).ajaxComplete(function(){
    // fire when any Ajax requests complete
})

ССЫЛКА: Запуск сценариев JQuery для загруженного содержимого AJAX

Answer 4

Это помогло мне загрузить "контент, зависящий от jquery", в документ веб-страницы. Лично мне нравится держать вещи в функциях, потому что их легче поддерживать, когда у вас есть другие сценарии. Я создал функцию с именем globalSections, которую можно использовать на любой странице, пока я придерживаюсь следующего шаблона. Внутри функции я создал элемент div с идентификатором "header". Затем я загрузил свой внешний "jquery-зависимый контент" в этот недавно созданный div. Наконец, получите скрипты, необходимые для запуска этого контента.

$.globalSections = function() {
  $('#wrapper').prepend('<div id="header"></div>');
  $('#header').load('/myfile.html', function() {
  $.getScript("js/jquery.scripts.js");
  });
}

Затем запустите функцию

$(function() {
  $.globalSections();
});

Коротко и просто