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

Question

[N]

$(document).ready(function(){
    $(document).on('click','.opys',function(e){
         e.preventDefault();
         var link = $(this).attr("href");
         $('#target').load(link);
      });
});

С помощью данного кода загружается html страница в div-блок:

<div id="target">
</div>

Как реализовать код, чтобы можно было выполнять скрипты в загруженном блоке, например, слайдшоу? Все скрипты содержатся в main.js, также еще подключена сама библиотека jquery в основном документе.

Comments

[N]

Весь код прописан в родителе (скриптом загружается только чистый html). Как выяснилось в даном случае простенькие функции работают (типа alert), а вот уже слайдеры не работают (flexslider, responsiveslides...).

Answer 1

[Александр Хиренко]

$(document).ready(function(){
    $(document).on('click','.opys',function(e){
         e.preventDefault();
         var link = $(this).attr("href");
         $('#target').load(link, function() {
               //Здесь выполняете нужные операции над загруженным DOM
         });
      });
});

Answer 2

[demimurych]

Вообще в самом вопросе есть ответ.
Любой javascript содержащийся в подгруженном и вставленном контенте должен быть выполнен.
Если у вас иначе значит проблема в другом.

Comments

[Игорь Воротнёв]

1. С каких пор такие прямые иньекции стали нормой? 2. У топикстартера используется jQuery, что уже само по себе ведет себя не так, как чистый Javascript.

Answer 3

[Игорь Воротнёв]

Цитирую John Resig(lead jquery developer):

We have to strip the scripts out otherwise they may be executed many times. The case where a user inserts a list item (for example) with a script inside of it that pertains to that particular item. The user then, later, clones that list item (or moves the list item to a different part of the tree) results in the scirpt being re-executed if we haven't removed it ahead of time.

In short: No browser does "run scripts on injection" so we're kind of defining our own semantics here - one aspect of that being that in order to avoid having scripts run way too many times we strip them out of the source.

В общем, load() не будет выполнять код из загруженного файла. И не должен - неправильно это и небезопасно - иньекция в чистом виде. По логике, вам надо либо весь код в родителе держать, либо после успешной загрузки явно "пепрезапускать" загруженный скрипт. Посмотрите решение здесь:
stackoverflow.com/questions/9794762/jquery-load-is...

И еще в jQuery есть такая "слушающая" штука как live(), обязательно почитайте. В вашем случае должна решить проблему.

Comments

[N]

читал что из-за нерациональности .live() в новых версиях jquery нет.

[Игорь Воротнёв]

@volkol не важно, что там по поводу рациональности. Вы же не указали версию jQuery. Для свежих используйте on(). https://api.jquery.com/on/

[N]

Весь код прописан в родителе (скриптом загружается только чистый html). Как выяснилось в даном случае простенькие функции работают типа alert, а вот уже слайдеры не работают (flexslider...).

[Игорь Воротнёв]

@volkol почитайте как работает javascript, как браузеры парсят html и скрипты, как происходит взаимодействие с DOM. То, чего вы ожидаете, перечит логике. Если кратко - в момент выполнения скрипта тех элементов, которыми вы хотите манипулировать, еще не существует. Именно поэтому созданы специальные "обертки" типа live() и on().