Почему не применяются скрипты для кода загруженного через load()?

Всем привет!

Подскажите, пожалуйста, почему не применяются скрипты для страницы index_s2.html, которая загружена через load() при клике?
Как можно решить данную проблему?

Страница index.html:
<div id="menu">
<a id="home">Главная</a>
<a id="contacts">Контакты</a>
</div>
 <div id="content"></div>
 <div id="footer"></div>
 <script id="scripts"></script>


<script>
$("#content").load("index_s1.html"); 
$("#footer").load("index_podval.html");
$("#scripts").load("js/app.js"); // загрузка всех скриптов

$('#contacts').click(
         function() {
          $("#content").load("index_s2.html");
         });



jQuery загружен в head.

Спасибо за внимание и помощь.
  • Вопрос задан
  • 3847 просмотров
Решения вопроса 2
@Kane
Можно использовать делегирование, для установки обработчика. Например:

$(document).on('click', '#contacts', function() {
  $("#content").load("index_s2.html");
});
Ответ написан
Комментировать
alexgl2004
@alexgl2004
Конечно они не будут применяться. Так как был загружен кусок текста на страницу после выполнения всех скриптов. Самый действенный вариант, подготовить функцию (класс), которая срабатывает на onsuccess ajax. Эта функция будет просто повторно вызывать, требуемые для данного участка страницы, функциии скриптов.
P.S. в каждом указанном выше файле-скрипте нужно искать запускающую конструкцию или (если код сжат) смотреть мануалы по каждому скрипту.
P.S.S
$.getScript("js/jquery.slitslider.js"); и т.п.- так не получиться, только можешь вызвать ошибки, двойные операции, зацикливание, вплоть до зависания браузера.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Начнем с того что так делать не стоит вообще. Я про сборку страницы посредством ajax.

Что бы подключение работало нужно подключить скрипт. Вообще у jQuery если мне память не изменяет есть метод getScript, который выполнит скрипт. Вы же просто помещаете текст в script - выполняться от этого он не будет.

Если вы хотите динамически подключить js - проще будет сделать так:
var script = $('<script />', {
    src: 'js/app.js'
});
$('body').append(script);

А еще лучше воспользоваться загрузчиками аля head.js или, что было бы элегантнее, require.js.
Ответ написан
Комментировать
@Boshnik Автор вопроса
Спасибо, за ответ.

Пробовал я через require.js - картина та же.

в app.js у меня код:
$.getScript("js/jquery.slitslider.js");
$.getScript("js/jquery.ba-cond.min.js");
$.getScript("js/imagesloaded.pkgd.min.js");
$.getScript("js/classie.js");
$.getScript("js/cbpGridGallery.js");


Вроде прекрасно вставляется и выполняется, но при загрузке второй страницы скрипты для нее не применяются((((
Ответ написан
Комментировать
@Boshnik Автор вопроса
Делегирование, оказалось лучше всего))
Спасибо за помощь.

P.S. Недавно нашел такой же вопрос с решением - JQuery: Как выполнить скрипт в загруженной странице с помощью .load()?
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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