Дождитесь загрузки при запуске 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 со встроенной Scripts в нем и добавить, что в DOM сценарий не будет работать , Однако jQuery имеет функциональность в своем ajax-коде, который будет анализировать эти встроенные скрипты и выполнять их.

От this page:

Различные обработки данных может быть достигается с помощью опции DATATYPE. Помимо простого xml, dataType может быть html, json, jsonp, script или text.

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

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

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

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

function doAfterLoad() { 
// ... 
} 

А потом просто вызвать эту функцию в успех обратного вызова методов нагрузки или АЯКС.

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