Попытка выбрать теги script из jQuery ajax get response

Я нахожусь на странице A. Щелкнута ссылка, и я загружаю DOM через jQuery get со страницы B. Внутри страницы B DOM - это несколько динамически генерируемых тегов script с классом "dataScript" вдоль с кучей других тегов script, с которыми я не хочу ничего делать.

Единственное, что я хочу от этого DOM, это теги .dataScript, которые затем я хочу вставить в div с идентификатором "scriptOutput" в DOM страницы A. Это не сработает, если элемент с класс "dataScript" является тегом script. Только если это какой-то другой тег, например тег div. Вот пример того, что я пытаюсь сделать:

Страница A:

<html>
<head>
<title>Page A</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {
 $("#ajaxJsLink").click(function() {
  $.get("pageB.html", function(data) {
   var scriptElements = $(data).find(".dataScript").contents();
   console.log(scriptElements);
   $(scriptElements).each(function(index) {
    $("#scriptOutput").append($(this).html());
   });
  });
  return false;
 });
 $("#ajaxDivsLink").click(function() {
  $.get("pageB.html", function(data) {
   var scriptElements = $(data).find(".dataDiv").contents();
   console.log(scriptElements);
   $(scriptElements).each(function(index) {
    $("#divOutput").append($(this).html());
   });
  });
  return false;
 });
});
</script>
</head>
<body>
<p>This is page A.</p>
<hr />
<p>
<a href="pageB.html" id="ajaxJsLink">Get JavaScript from Page B.</a><br />
<a href="pageB.html" id="ajaxDivsLink">Get Divs from Page B.</a>
</p>
<hr />
<div id="scriptOutput">
 <h2>Script Output</h2>
</div>
<div id="divOutput">
 <h2>Div Output</h2>
</div>
</body>
</html>

Страница B:

<html>
<head>
<title>Page B</title>
</head>
<body>
<p>This is page B.</p>
<div id="scripts">
 <script type="text/javascript" class="dataScript">
  function someFunction() {
   alert("I am");
  }
 </script>
 <script type="text/javascript" class="dataScript">
  function anotherFunction() {
   alert("Javascript");
  }
 </script>
</div>
<div id="divs">
 <div class="dataDiv">
  <div>
   function someFunction() {
    alert("I am");
   }
  </div>
 </div>
 <div class="dataDiv">
  <div>
   function anotherFunction() {
    alert("Html");
   }
  </div>
 </div>
</div>
</body>
</html>

Я пробовал добавлять .contents(),.html() и .text() для содержимого .dataScript, но ничего не работает. Благодарим вас за внимание при рассмотрении/ответе на мои вопросы. Я ценю вашу помощь!

UPDATE:

В случае, если кто-то еще пытается это сделать, вот менее элегантное, но полностью функциональное решение, в котором я закончил:

Выведите javascript как обычный текст (теги script) внутри одного div (с идентификатором и установленным для отображения: none) на странице B. Затем на странице A выполните внутри функции обратного вызова запроса получения:

var docHead = document.getElementsByTagName("head")[0]; //head of Page A
var newScript = document.createElement("script");
newScript.setAttribute("type","text/javascript");
newScript.innerHTML = jQuery(data).find("#divWithPlainTextJs").text(); //insert plain text JS into script element
docHead.appendChild(newScript); //append script element to head of Page A
jQuery("#divWithPlainTextJs").remove(); //remove the plain text div and JS from the DOM

Благодаря Emmett для напоминания мне о методе document.createElement.

Ответ 1

jQuery фактически не добавляет элементы <script> в DOM. Вместо этого он просто анализирует содержимое script. Поскольку он не находится в DOM, $(data).find(".dataScript") ничего не соответствует.

Если вам действительно нужно содержимое тега <script>, вы можете попробовать использовать регулярное выражение для анализа ответа ajax.

Обратите внимание на комментарий Карла Сведберга для получения дополнительной информации:

Все методы вставки jQuery используют функция domManip внутри чистых/технологических элементов до и после того, как они вставлены в DOM. Одна из вещей domManip функция does вытаскивает любой scriptэлементы, которые нужно вставить и запустить их через "процедуру evalScript", вместо того, чтобы вводить их с остальными фрагмента DOM. Он вставляет скрипты отдельно, оценивает их, а затем удаляет их из DOM.

Я считаю, что одна из причин jQuery делает это, чтобы избежать Ошибки "Разрешения отказа", которые могут в Internet Explorer, когда вставка скриптов при определенных обстоятельства. Он также избегает неоднократно вставляя/оценивая такой же script (который мог бы потенциально вызывают проблемы), если он находится в пределах содержащий элемент, который вы вставка, а затем перемещение DOM.

Ответ 2

Основные проблемы: ожидая, что элементы <script> будут дочерними элементами <div id='scripts'>, и используя .find() вместо .filter().

При использовании jQuery $.get() и $.ajax() возвращаемая data является текстовой строкой. Когда вы размещаете data в обертке jQuery, $data = $(data), он преобразуется в массив: [p, div#scripts, div#divs, div#dataDiv, <script.dataScript>, <script.dataScript>]. Вы заметили, что элементы <script> больше не являются дочерними элементами <div id='scripts'>, а в корне? jQuery сделал это специально.

$dataScripts = $data.filter('script.dataScripts') даст нам коллекцию, которую мы теперь можем перебирать так:

$dataScripts.each(function(i) {
    $('#scriptOutput').append($(this));
});

Это будет оценивать скрипты в $dataScripts, а не вставлять их в DOM, например, @Emmett.

Ответ 3

Если вы загрузите результат AJAX следующим образом:

function (data) {
 // the result is loaded in the variable 'data'
}

И затем вставьте его в div следующим образом:

function (data) {
 $("#someDiv").text(data);
}

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

Дело в том, что... если вы просто сохраните script в качестве внешнего .js файла, вы можете загрузить его в ajax в виде текста:)