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

Question

[Boshnik]

Всем привет!

Подскажите, пожалуйста, почему не применяются скрипты для страницы 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.

Спасибо за внимание и помощь.

Answer 1

[Kane]

Можно использовать делегирование, для установки обработчика. Например:

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

Answer 2

[Алексей]

Конечно они не будут применяться. Так как был загружен кусок текста на страницу после выполнения всех скриптов. Самый действенный вариант, подготовить функцию (класс), которая срабатывает на onsuccess ajax. Эта функция будет просто повторно вызывать, требуемые для данного участка страницы, функциии скриптов.
P.S. в каждом указанном выше файле-скрипте нужно искать запускающую конструкцию или (если код сжат) смотреть мануалы по каждому скрипту.
P.S.S
$.getScript("js/jquery.slitslider.js"); и т.п.- так не получиться, только можешь вызвать ошибки, двойные операции, зацикливание, вплоть до зависания браузера.

Comments

[Boshnik]

Спасибо за разъяснение.

Answer 3

[Сергей Протько]

Начнем с того что так делать не стоит вообще. Я про сборку страницы посредством ajax.

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

Если вы хотите динамически подключить js - проще будет сделать так:

var script = $('<script />', {
    src: 'js/app.js'
});
$('body').append(script);

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

Answer 4

[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");

Вроде прекрасно вставляется и выполняется, но при загрузке второй страницы скрипты для нее не применяются((((

Answer 5

[Boshnik]

Делегирование, оказалось лучше всего))
Спасибо за помощь.

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