在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？要不然？