在div元素内执行javascript ajax更新

Question

我在页面中有一些更新页面某个部分的ajax脚本。问题在于输出在div元素中更新，它使得写入的任何javascript完全无用。

用div编写的脚本是用php代码编写的，并且是动态的而不是静态的（因此将它们包括到主页中不是一种选择）。

基本构建适应和支持是这样的：

<div id="someid"> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    // some code that is dynamically created with php and is not working 
    //]]> 
    </script> 
    <!--Some html code that is dynamically created with php--> 
    <!--The html code created needs that script above--> 
    <!--Possibly more scripts that are...--> 
    <!--you guessed it! Dynamically created with php--> 
</div> 

可能的结果：

<div id="someid"> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    $(function() { 
    $("#20").datepick({dateFormat: 'yyyy-mm-dd'}); 
    }); 
    //]]> 
    </script> 
    <input id="20" type="text" name="somename" maxlength="10" />"; 
</div> 

^所有上述值的可能用户输入动态变化。代码

例子：

<script type="text/javascript"> 
//<![CDATA[ 
    function showsubs() 
    { 
    var xmlhttp;  
    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("someID").innerHTML=xmlhttp.responseText; 
    } 
    } 
    xmlhttp.open("GET","give.php",true); 
    xmlhttp.send(); 
    } 
//]]> 
</script> 
<input type="button" onclick="showsubs()"> 
<div id="someID"></div> 

哪里give.php是简单的：

<script type="text/javascript"> 
    $(function() { 
    $("#inputField2").datepick({dateFormat: 'yyyy-mm-dd'}); 
    }); 
<br /><br /> 
<input type="text" size="12" id="inputField2" /> 

---

我自己也尝试这样的：（我有标记的DIV中每个脚本类）

<script type="text/javascript"> 
//<![CDATA[ 
console.log("start"); 
function evalme() 
{ 
    console.log("eval"); 
    var a=document.getElementsByClassName('scriptttorun'); 
    console.log(a.length); 
    for (var i=0;i<a.length;i++) 
{ 
eval(document.getElementsByClassName('scripttorun')[i].innerHTML); 
} 

} 
$('document').ready(evalme());//I call evalme on other circumstances as well 

     //]]> 
    </script> 

但eval不会激活我的功能..

Answer 1

您应该尝试将代码作为普通JavaScript获取。在您的AJAX成功处理程序上，尝试使用您收到的脚本eval。

这是大多数远程JavaScript包含插件所做的。虽然当你这样做时，你需要知道闭包，JavaScript范围的确切效果。

---

方法1：

如果你可以使用jQuery，那么最好的方法是使用下面的方法：

$.ajax({ 
    type: "GET", 
    url: "test.js", 
    dataType: "script" 
}); 

这将要求test.js（你可以使用javascriptgenerator.php太） 。

如果指定script，$.ajax()将执行从服务器上把它传递给成功处理程序作为一个字符串之前收到的JavaScript。

---

方法2：

eval的方法。尝试给一个ID，以你的脚本标签：

<script id='someID'> 
    //your dynamic javascript 
</script> 

现在你注入你的JavaScript到您的div后，你可以做到以下几点：

eval(document.getElementById('someID').innerHTML); 

还是让我知道你选择哪一种方法。

Answer 2

如果jQuery是加载

<script type="text/javascript"> 
//<![CDATA[ 
(function(){ 
    var checkIntv; 
    function checkJQuery(){ 
     if (typeof jQuery == 'undefined') { 
      checkIntv = setInterval(function(){checkJQuery()}, 100); 
      console.log('wait...'); 
     } else { 
      clearInterval(checkIntv); 
      console.log('do something'); 
      $("#20").datepicker({dateFormat: 'yyyy-mm-dd'}); 
     } 
    } 
checkJQuery(); 
}()); 
//]]> 
</script> 

但是，你有什么样的错误你可以检查？ $ undefined？要不然？