Jquery mobile swipe on single page uses first page targets - ajax

Question

I've converted a multi-page app intro single pages and now the swipes keep using the first page's targets.
On my first page I have:
$(document).on('pageshow', '#firstPage', function() {
$(document).on("swipeleft", function(event) {
$("body").pagecontainer("change", "secondPage.html", {
transition: "fade"
});
event.stopImmediatePropagation();
});
$(document).on("swiperight", function(event) {
$("body").pagecontainer("change", "lastPage.html", {
transition: "fade"
});
event.stopImmediatePropagation();
});
});
With HTML:
<div data-role="page" id="firstPage" data-dom-cache="false">
<!--CONTENT -->
<!-- PAGE JS -->
</div>
It works on the firstpage, but when I get to the second page it uses the first targets - secondPage.html and lastPage.html
my secondPage has this:
$(document).on('pageshow', '#secondPage', function() {
console.log('showing tags');
$(document).on("swipeleft", function(event) {
$("body").pagecontainer("change", "thirdPage.html", {
transition: "fade"
});
event.stopImmediatePropagation();
});
$(document).on("swiperight", function(event) {
$("body").pagecontainer("change", "firstPage.html", {
transition: "fade"
});
event.stopImmediatePropagation();
});
});
and HTML:
<div data-role="page" id="secondPage" data-dom-cache="false">
<!--CONTENT -->
<!-- PAGE JS -->
</div>
Etc etc...
I must add that my js code on each page is before the closing </div> of the page...so is being loaded by AJAX.
I did have this working on multi-page template, but the app has become quite big and for simplicity I decided to split it into separate pages.