Примените JavaScript к HTML, введенному с помощью AJAX

Я создаю сайт-портфолио, в который я хотел бы добавить частичные HTML-файлы с помощью AJAX-запроса. Это основной HTML:

    <div id="portfolio">
      // This will be replaced
    </div>
    <a href="#" id="fire">Click Me</a>

Код jquery, который я использую, выглядит следующим образом:

    $( "#fire" ).click(function() {
        $( "#portfolio" ).load("partial.html #portfolio > *");
    });

Это работает, и я могу загрузить отдельные частичные страницы, но я не могу понять, как запускать сценарии на вставленном HTML. Я использую Foundation Orbit, и я хочу, чтобы эти ползунки работали правильно после вызова AJAX. Я подумал, что это может быть конфликт, поэтому я также попытался использовать slides.js, но это тоже не сработало. У меня есть все зависимости и необходимые сценарии в моем файле индекса. Что мне нужно сделать, чтобы скрипт Orbit применялся к контенту на странице после вызова AJAX?

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

Вот этот планкр. У него есть рабочий слайдер Orbit, чтобы доказать - самому себе - что скрипт работает.

Заранее спасибо!

Источник

1 ответ

Решение

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

$( "#portfolio" ).load("partial.html #portfolio > *", function (response) {
    // executed after query is complete
});

После того, как вы добавите новый слайдер Orbit на страницу, вам придется его инициализировать:

$(document).foundation('orbit').init();

... так, вы бы сделали это в функции обратного вызова.

Документация

Источник
Другие вопросы по тегам