Дождаться загрузки при запуске JS, встроенного в загруженный элемент AJAX?

Question

Предположим, вы загружаете содержимое div через AJAX.Предположим, что он содержит различные элементы и код JS, модифицирующий эти элементы.

Должен ли скрипт ждать срабатывания onload или безопасно просто начать модифицировать DOM сразу после этого?Безопасен ли следующий пример?

<form id="foo">...</form>
<script type="text/javascript">
    $("#foo").bar();
</script>

Или я всегда должен делать следующее:

<form id="foo">...</form>
<script type="text/javascript">
    $(function(){
        $("#foo").bar();
    });
</script>

Answer 1

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

С этой страницы :

Различные обработки данных могут быть достигается с помощью параметра dataType. Помимо простого XML, dataType может быть HTML, JSON, JSONP, сценарий или текст.

Типы text и xml возвращают данные без обработки. Данные просто передается обработчику успеха, либо через текст отклика, либо свойство responseXML объекта Объект XMLHttpRequest соответственно.

Примечание: мы должны убедиться, что MIME тип сообщается веб-сервером соответствует нашему выбору dataType. В в частности, XML должен быть объявлен сервер в виде текста / XML или application / xml для согласованного Результаты.

Если указан HTML, любой встроенный JavaScript внутри полученных данных выполняется до того, как HTML возвращается в виде строки. Так же, скрипт выполнит JavaScript это отозвано с сервера, затем вернуть сам скрипт как текстовые данные.

Поскольку jQuery сначала выполнит сценарии, встроенный код сценария будет запущен до того, как HTML будет добавлен в dom. Чтобы обойти это, вы должны вернуть свой код JavaScript в виде функции:

function doAfterLoad() {
// ...
}

А затем просто вызовите эту функцию при успешном обратном вызове методов load или ajax.

('#result').load('ajax/test.html', function() {
  doAfterLoad();
});