Question

我有一个页面。在该页面的标题中，我拥有所有的javascript。在页面正文我有一个调用ajax http请求的链接（我使用长手xhr而不是jquery），该请求将php表单拉到我的页面。

该表单有一些使用jquery格式化/样式化的选择下拉列表。我遇到的问题是，当我将表单直接放在页面中时，select在页面加载时格式正确。但是当我从页面中删除表单并使用ajax将其拉入时，就好像javascript没有加载一样。

因此当页面加载时javascript正在加载，但是当我通过ajax将php表单拉入页面时，javascript无效。选择下拉列表未格式化/样式化。它几乎就像javascript需要重装或其他东西。

我没有使用jquery来拨打电话。我只是用长手阿贾克斯。

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时，在插入HTML响应后在那里激活你的js css调整。

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

Answer 2

在原始格式中，是否使用在页面加载时运行的脚本格式化选择？如果是这样，那就是你的问题。通过ajax / after / page加载加载表单意味着onload脚本不会影响选择。您需要在加载表单后运行脚本。

Answer 3

如果没有看到您的代码，我会说您需要使用.live()或.bind()将行为附加到您的元素。如果您在php表单页面上应用了诸如datepicker之类的东西，为了使该功能可用，您需要在XHR请求的回调函数中重新分配您使用XHR引入的元素。

ajax调用后javascript无法正常工作

3 个答案: