InnerHtml AJAX：Javascript無法正常工作

Question

我正在使用AJAX調用來自另一個PHP文件的PHP文件。 被叫PHP創建HTML內容非常久遠一個JavaScript代碼：

<div id = "chart" style="height: 400px "></div> 
<script src="http: //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src = "http://code.highcharts.com/highcharts.js" > < /script> 
<script> 
    $(function(){ 
     var xcat = ["Build 1","Build 2"]; 
     var datas = [100,60]; 
     $("#chart").highcharts({ 
      chart: { 
       type: "column" 
      }, 
      title: { 
       text: "Build Progress" 
      }, 
      xAxis: { 
       categories: xcat 
      }, 
      yAxis: { 
       title: { 
        text: "seconds" 
       } 
      }, 
      series: [{ 
       name: "Boot Time", 
       data: datas 
      }] 
     });  
}); 
</script > 

劇本沒有得到使用的innerHTML執行插入之後。 我讀了一些解決方案：其中之一是存在，但對於外部js文件。

http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS#quickIDX1

我需要知道如何使腳本運行而無需外部JS文件

幫我用同樣

感謝。 Patrick

Answer 1

當您使用innerHTML時，不執行腳本標記。如果你使用jQuery，你可以嘗試$.html()而不是innerHTML。 $.html()將自動執行腳本標記。

Answer 2

您鏈接的代碼只會在DOM準備事件觸發時觸發。如果你通過ajax加載，你是對的。它永遠不會觸發，因爲頁面已經被加載，而且你不會刷新。

變化

$(function(){ //shorthand for jQuery(document).ready(function(){ 
     var xcat = ["Build 1","Build 2"]; 
     var datas = [100,60]; 
     $("#chart").highcharts({ 
      chart: { 
       type: "column" 
      }, 
      title: { 
       text: "Build Progress" 
      }, 
      xAxis: { 
       categories: xcat 
      }, 
      yAxis: { 
       title: { 
        text: "seconds" 
       } 
      }, 
      series: [{ 
       name: "Boot Time", 
       data: datas 
      }] 
     });  
    }); 

到

function(){ 
     var xcat = ["Build 1","Build 2"]; 
     var datas = [100,60]; 
     $("#chart").highcharts({ 
      chart: { 
       type: "column" 
      }, 
      title: { 
       text: "Build Progress" 
      }, 
      xAxis: { 
       categories: xcat 
      }, 
      yAxis: { 
       title: { 
        text: "seconds" 
       } 
      }, 
      series: [{ 
       name: "Boot Time", 
       data: datas 
      }] 
     });  
    }();// the() self executes the function so you don't have to call it