InnerHtml AJAX：Javascript不起作用

Question

我正在使用從另一個PHP文件對一個PHP文件的AJAX調用。 被調用的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文件的情況下運行

幫我一樣

謝謝。 帕特里克

Answer 1

您鏈接的代碼僅在DOM ready事件觸發時觸發。 如果您是通過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

Answer 2

當您使用innerHTML時，不會執行腳本標簽。 如果使用jquery，則可以嘗試$.html()代替innerHTML。 $.html()將自動執行腳本標簽。