Accepted answer

With jQuery mobile you need to put your page specific scripts and styles inside the page-content div. See "Known Limitations" in documentation.


I have tried what Tsar mentioned and for me it worked. What I did was:

Added the script within the head tag, and added the div with the ID(rederTo) used in the script within the "page-content".

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="" rel="stylesheet">
<script src=""></script>
<script src=""></script>
<script src="libs/hightcharts/highcharts.js"></script>
<script src=""></script>

    <script type="text/javascript">
        var chart1; // globally available
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            type: 'bar'
         title: {
            text: 'Fruit Consumption'
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         yAxis: {
            title: {
               text: 'Fruit eaten'
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]


<div id="ge" data-role="page">
    <div data-role="header">
    <div data-role="content">
        <div id="container"></div>


I had this same problem when I first started coding with jQuery Mobile... You have to bind your scripts on pagecreate, ie:

$(document).delegate("#page-id", "pagecreate", function() {
    // highcharts, etc.

Related Query

More Query from same tag