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 文件的情况下运行

帮我做同样的事情

谢谢。 帕特里克

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