Скрипты убираются с помощью jQuery .load

Question

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

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

$('#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, которые будут возвращать только те данные, которые вы запрашиваете.В противном случае вещи могут стать конкретными и даже хитрыми.

Так что скорее комментарий, чем реальный ответ.