JavaScript не работает после вызова AJAX

Question

У меня есть страница. В заголовке этой страницы у меня есть все мои JavaScript. В теле страницы есть ссылка, которая вызывает http-запрос ajax (я использую длинную руку xhr, а не jquery), и этот запрос тянет форму php на мою страницу.

Эта форма имеет некоторые выпадающие списки, которые отформатированы / оформлены с использованием jquery. Проблема, с которой я сталкиваюсь, заключается в том, что когда я помещаю форму прямо на страницу, выборка отлично формируется при загрузке страницы. Но когда я удаляю форму со страницы и извлекаю ее, используя ajax, это как если бы javascript не загружался.

Таким образом, JavaScript загружается при загрузке страницы, но когда я загружаю форму php на страницу через ajax, JavaScript не работает. выпадающий список не отформатирован / не стилизован. Это почти как javascript нужно перезагрузить или что-то в этом роде.

Я не использую jquery для совершения звонка. Я просто использую Ajax с длинной рукой.

function getPage(str)
 {
 if (str=="")
   {
   document.getElementById("center").innerHTML="";
   return;
   } 
if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("center").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","xhr_php/get_page.php?page="+str,true);
 xmlhttp.send();
 }

Answer 1

Запускается скрипт стилей jquery, затем он выполняется. Если вы хотите, чтобы он снова запускался после вызова ajax, поместите его в функцию и вызовите функцию в случае успеха.

function dostuff() 
{
    $('selector').css('var', 'val');
}

Успешный случай, когда status == 200 и readyState == 4, запускают ваши настройки js css после того, как вы вставили HTML-ответ.

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("center").innerHTML=xmlhttp.responseText;
        dostuff();
    }
}

Answer 2

Не видя ваш код, я бы сказал, что вам нужно использовать .live () или .bind () , чтобы прикрепить поведение к вашим элементам.Если вы применяете такие вещи, как datepicker или что-то на странице формы php, чтобы сделать эту функцию доступной, вам нужно переназначить элементы, которые вы добавили с помощью XHR, в функцию обратного вызова вашего запроса XHR.

Answer 3

в исходном виде, отформатированы ли выбранные с использованием сценария, который выполняется при загрузке страницы? если так, то это твоя проблема. загрузка формы через ajax / after / page load означает, что сценарии загрузки не влияют на выбор. вам нужно запустить скрипты после загрузки формы.