Jquery Not Working on loaded page

Question

i have a problem with jquery code. in this case i use library high chart. when the code put in one page there's no problem found. the script running well. like in this images

working well

but that's not what I want. in my case i use single page apps. and in making Single Page Apps I Use Angular JS Library. nah. here's in my problem. the jquery didn't running cause i loaded page when running page. so. when i click another menu the content load with another page.

this is jquery script i use for using high chart library :

    $(function () {
var chart;
$(document.body).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container', //letakan grafik di div id container
            //Type grafik, anda bisa ganti menjadi area,bar,column dan bar
            type: 'line',  
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Pendapatan perkapita indonesia tahun 2006-2011',
            x: -20 //center
        },
        subtitle: {
            text: 'candra.web.id',
            x: -20
        },
        xAxis: { //X axis menampilkan data tahun 
            categories: ['2006', '2007', '2008','2009','2010','2011']
        },
        yAxis: {
            title: {  //label yAxis
                text: 'pendapatan dalam USD'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080' //warna dari grafik line
            }]
        },
        tooltip: { 
        //fungsi tooltip, ini opsional, kegunaan dari fungsi ini 
        //akan menampikan data di titik tertentu di grafik saat mouseover
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y ;
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        //series adalah data yang akan dibuatkan grafiknya,
        //saat ini mungkin anda heran, buat apa label indonesia dikanan 
        //grafik, namun fungsi label ini sangat bermanfaat jika
        //kita menggambarkan dua atau lebih grafik dalam satu chart,
        //hah, emang bisa? ya jelas bisa dong, lihat tutorial selanjutnya 
        series: [{  
            name: 'Indonesia',  
            //data yang akan ditampilkan 
            data: [1660, 1946,2271,2590,3004,3550]
        }]
    });
});

});

and for calling that script i use this code in html:

  <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

please help me. cause this also happen in another library. Thanks

Answer 1

You probably want to use an AngularJS Highcharts Adapter rather than invoking Highcharts with jQuery.

You are always going to run into problems using jQuery outside of AngularJS. In most cases jQuery should not be needed in an AngularJS SPA application.