Question

我正在尝试创建单个页面应用程序，并且在点击导航项目时使用jquery load来替换我的内容。

有些页面需要运行javascript来初始化内容，我正在试图弄清楚如何。（在我的例子中，我想初始化由chart.js创建的折线图）

在其他人提出的上一个问题中，它声明将代码放在load的回调函数中，但它对我不起作用，或者我做错了。 jQuery .load() html content and execute script

代码：

$(document).ready(function() {


var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function() {
    var href = $(this).attr('href');
    if (hash == href.substr(0, href.length - 5)) {
        var toLoad = hash + '.html #content';
        $('#content').load(toLoad)
    }
});

$('#nav li a').click(function() {

    var toLoad = $(this).attr('href') + ' #content';
    $('#content').hide();
    loadContent();
    window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);

    function loadContent() {
        $('#content').load(toLoad, '', showNewContent())

    }

    function showNewContent() {

        $('#content').show('fast',loadChartData);

    } //end of show content

    // My javascript to initialize my loaded content, in my case, I am 
    trying to initialize a chart.js line chart.

    function loadChartData(){


        new Chart(document.getElementById("line-chart"), {
            type: 'line',
            data: {
                labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
                datasets: [{
                    data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
                    label: "Africa",
                    borderColor: "#3e95cd",
                    fill: false
                }, {
                    data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
                    label: "Asia",
                    borderColor: "#8e5ea2",
                    fill: false
                }, {
                    data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
                    label: "Europe",
                    borderColor: "#3cba9f",
                    fill: false
                }, {
                    data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
                    label: "Latin America",
                    borderColor: "#e8c3b9",
                    fill: false
                }, {
                    data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
                    label: "North America",
                    borderColor: "#c45850",
                    fill: false
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'World population per region (in millions)'
                }
            }
        });

    }
    return false;
});
});

我该怎么办？

Answer 1

加载函数$（selector）.load（URL，data，callback）可以有一个回调函数。因此，在发送给load函数的回调中调用chart.js的初始化函数。在初始化之前，DOM必须就位。

$('#content').load(toLoad, '', callback);

function callback () {
    // wait for DOM to initialize
    // Initialize content using chart.js 
}

如何使用jQuery加载HTML内容并执行JavaScript？

1 个答案: