Comment charger du contenu HTML en utilisant jQuery et exécuter JavaScript?

Question

J'essaye de créer une application d'une seule page, et j'emploie la charge de jquery pour remplacer mon contenu tandis qu'un article de navigation est cliqué.

Certaines pages nécessitent d'exécuter javascript pour initialiser le contenu, et j'essaie de comprendre comment. (Dans mon exemple, je veux initialiser le graphique en courbes qui est créé par chart.js)

Dans la question précédente posée par d'autres, il indique de placer le code dans la fonction de rappel de chargement, mais il doesn ' Je travaille pour moi, ou je fais quelque chose de mal. jQuery .load() html content and execute script

code:

$(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; 
}); 
}); 

Que dois-je faire?

Answer 1

La fonction de chargement $ (sélecteur) .load (URL, données, rappel), peut avoir un rappel. Ainsi, appelez la fonction d'initialisation de chart.js dans le rappel envoyé à la fonction de chargement. Le DOM doit être en place avant l'initialisation.

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

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