Сценарии, разделенные с jQuery .load

Question

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

При использовании что-то вроде:

$('#content').load('loadTest.html'); 

Все сценарии на loadTest.html нагрузки просто отлично. Однако, когда фрагменты загрузки страницы, как это:

$('#content').load('loadTest.html #content'); 

скрипты раздели до DOM обновляется

Это четко задокументированы в http://api.jquery.com/load/, который говорит:

Примечание:Когда вызывая .load(), используя URL-адрес без суффикс-селекторного выражения, содержимое передается в .html() перед удалением скриптов. Это выполняет блоки скриптов перед их отбрасыванием. Если, однако, вызывается .load() с добавлением селекторного выражения к URL-адресу, сценарии удаляются до обновления DOM, поэтому они никогда не выполняются. Пример обоих случаев можно увидеть ниже:

Я понимаю, что я мог бы просто загружать скрипт извне, который можно использовать где угодно, но дело в том, что я использую систему ajax для всей страницы, где все загружается динамически. Поэтому мне не кажется, что у меня есть каждая функция javascript, которую я когда-либо буду писать (100 на данный момент) во внешних файлах. Тем более, что некоторые из этих функций javascript сделаны из значений, загружаемых из базы данных, которые я не могу зарегистрировать в файле .js.

Есть ли способ обхода удаленных сценариев до обновления DOM? Могу ли я каким-то образом вручную загрузить их? Любой маленький пример был бы полезен для меня.

Answer 1

Как вы сказали. jQuery извлекает этот элемент перед выполнением только этого блока.

Вы можете изменить вывод, чтобы сервер возвращал данные в нужном вам формате или просто написал свой собственный. Он будет извлекать нужные вам элементы, выводя их в DOM.

непроверенные, но это было бы по линии этого ..

$('#content').load('loadTest.html #content,script'); 

Из памяти это более действительной ..

$.get('loadTest.html',function(r){ 
    var els = $(r).find('#content,script'); 
    $('#content').html(els); 
}); 

Answer 2

После вашего комментария я думаю, что вы могли бы быть заинтересованы в чем-то вроде js/css lazyload. Он условно загружает скрипты, я использую его на некоторых небольших сайтах для загрузки только скриптов и CSS, когда мне это нужно на разных подстраницах или взаимодействии с пользователем.

Вы загружаете его один раз в голове:

<script src="js/lazyload-min.js" type="text/javascript"></script> 

А затем вы можете загрузить сценарии, когда вам нужны их динамически, один из многих примеров:

// Load a single JavaScript file and execute a callback when it finishes. 
LazyLoad.js('http://example.com/foo.js', function() { 
    alert('foo.js has been loaded'); 
}); 

Работа для CSS файлов тоже ,

Это может быть полезно в вашем случае, однако, это может изменить вашу логику загрузки. В любом случае, я думаю, что на вашем сервере обычно должно быть несколько конечных точек AJAX, которые будут возвращать только те данные, которые вы запрашиваете. В противном случае вещи могут стать конкретными и даже сложными.

Так что больше комментариев, чем настоящий ответ.