{"action":"created","issue":{"url":"https://api.github.com/repos/jquery/jquery-mobile/issues/2369","labels_url":"https://api.github.com/repos/jquery/jquery-mobile/issues/2369/labels{/name}","comments_url":"https://api.github.com/repos/jquery/jquery-mobile/issues/2369/comments","events_url":"https://api.github.com/repos/jquery/jquery-mobile/issues/2369/events","html_url":"https://github.com/jquery/jquery-mobile/issues/2369","id":1534521,"number":2369,"title":".changePage() changes page, but reloads previous page into DOM","user":{"login":"charleskline","id":393499,"avatar_url":"https://avatars.githubusercontent.com/u/393499?v=3","gravatar_id":"","url":"https://api.github.com/users/charleskline","html_url":"https://github.com/charleskline","followers_url":"https://api.github.com/users/charleskline/followers","following_url":"https://api.github.com/users/charleskline/following{/other_user}","gists_url":"https://api.github.com/users/charleskline/gists{/gist_id}","starred_url":"https://api.github.com/users/charleskline/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/charleskline/subscriptions","organizations_url":"https://api.github.com/users/charleskline/orgs","repos_url":"https://api.github.com/users/charleskline/repos","events_url":"https://api.github.com/users/charleskline/events{/privacy}","received_events_url":"https://api.github.com/users/charleskline/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/jquery/jquery-mobile/labels/Component:%20Navigation","name":"Component: Navigation","color":"DDDDDD"},{"url":"https://api.github.com/repos/jquery/jquery-mobile/labels/Status:%20Incomplete","name":"Status: Incomplete","color":"444444"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":31,"created_at":"2011-08-31T18:28:28Z","updated_at":"2015-10-26T00:41:30Z","closed_at":"2013-05-07T19:39:23Z","body":"Here is the URL to see this in action:\r\nhttp://www.rightcode.net/development/fluid/careersmobile/index.php\r\n\r\nOn the second page, selecting an option in the menu should has an .change() which calls .changePage(). The change page event fires and loads the new page, but then immediately reloads the previous page back into the DOM"},"comment":{"url":"https://api.github.com/repos/jquery/jquery-mobile/issues/comments/150992408","html_url":"https://github.com/jquery/jquery-mobile/issues/2369#issuecomment-150992408","issue_url":"https://api.github.com/repos/jquery/jquery-mobile/issues/2369","id":150992408,"user":{"login":"dirtyrobinson","id":6667918,"avatar_url":"https://avatars.githubusercontent.com/u/6667918?v=3","gravatar_id":"","url":"https://api.github.com/users/dirtyrobinson","html_url":"https://github.com/dirtyrobinson","followers_url":"https://api.github.com/users/dirtyrobinson/followers","following_url":"https://api.github.com/users/dirtyrobinson/following{/other_user}","gists_url":"https://api.github.com/users/dirtyrobinson/gists{/gist_id}","starred_url":"https://api.github.com/users/dirtyrobinson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dirtyrobinson/subscriptions","organizations_url":"https://api.github.com/users/dirtyrobinson/orgs","repos_url":"https://api.github.com/users/dirtyrobinson/repos","events_url":"https://api.github.com/users/dirtyrobinson/events{/privacy}","received_events_url":"https://api.github.com/users/dirtyrobinson/received_events","type":"User","site_admin":false},"created_at":"2015-10-26T00:41:30Z","updated_at":"2015-10-26T00:41:30Z","body":"It's been a while since I encountered this issue but I remember spending a couple of days reading about what causes the issues and how it could be changed.  I don't remember the exact explanation of the solution but essentially the issue was caused by buttons with the same ID between the pages and when the new page was loaded into the DOM it essentially added a second listening event for that button.  \r\n\r\nIf I went through 2 pages, it would go to the second page and immediately go back to the first because the click event was being listened for twice.  When I went through 3 pages, it would switch screens 3 times.\r\n\r\nIt was incredibly frustrating, but the solution that worked for me was this:  \r\n\r\n     $(document).on('click', '#backbutton', function(e) { \r\n          if (e.handled !== true) { \r\n               e.handled = true;  \r\n               //Page change function here\r\n          }\r\n     });\r\n\r\nBasically, this looks to see if the event has already happened.  If it hasn't then it allows the button click to happen but if it's already been pressed it will change to true and it's this that prevents the page from automatically going back.\r\n\r\nI believe this issue can also be prevented by using the following:\r\n\r\n     $(document).off('click', '#backbutton').on('click', '#backbutton', function() { \r\n               //Page change function here\r\n     });"}}