Question

what I am trying to do is load a function in an anchor to change the page in jquery mobile

Here is the simplified HTML:

<div data-role="page" id="oldPage">
    <ul>
       <li><a href="newPage()">Link 1</a></li>
       <li><a href="newPage()">Link 2</a></li>
       <li><a href="newPage()">Link 3</a></li>
    </ul>
</div>
<div data-role="page" id="newpage">
</div>

Here is the script:

     function newPage() {
       $.mobile.changePage('#newpage');
     }

But when I click the link I get the message “Error Loading page”. How can I load a function to change to this new page, by clicking the link?

Answer 1

It would be href="javascript:newPage()" but I do not recommend it

instead consider

<div data-role="page" id="oldPage">
    <ul>
       <li><a href="#page1" id="someId1">Link 1</a></li>
       <li><a href="#page2" id="someId2">Link 2</a></li>
       <li><a href="#page3" id="someId3">Link 3</a></li>
    </ul>
</div>
<div data-role="page" id="newpage">
</div>

$(function() {
  $("#oldPage a").on("click",function() { 
    $.mobile.changePage($(this).attr("href"));
 });
});

I am guessing you mean

$(function() {
  $("#oldPage a").on("click",function() { 
    $("#oldPage").load($(this).attr("href"));
 });
});