Picture swipe script not working

Picture swipe script not working

I'm trying to make some pictures on a website "swipable" on mobile devices.
I'm new to javascript and jquery so I could have made any number of
mistakes, though I'm not sure where.
(Note: this is similar to a question I posted yesterday, but I have
changed quite a few things to make the following more understandable).
I have the following declared in my header (of course these files exist in
their respective directories):
<link rel='stylesheet'
href='http://www.hidden.com/css/jquery.mobile-1.3.2.min.css'>
<script src='http://www.hidden.com/js/jquery.mobile-1.3.2.min.js'></script>
This is the way the images are linked right now:
<div class='main_image'>
<a
href='//www.hidden.com/projects/1_west-harbin-station-towers/9.html'
style='display:block'>
<img src='http://www.hidden.com/1250_Harbin/hidden_harbin
towers9.jpg' alt='Interior Rendering from West Harbin Station
Towers [hidden]' style='max-width:832px; max-height:500px'
title='West Harbin Station Towers: Interior Rendering. click
for next slide (Rendering). '>
</a>
</div>
This is the script I wrote, which goes right after:
<script type='text/javascript'>
jQuery(function(){
jQuery('div.main_image').on('swipeleft', swipeleftHandler);
jQuery('div.main_image').on('swiperight', swiperightHandler);
function swipeleftHandler(event){
JQuery.mobile.changePage('//www.spatialpractice.com/projects/1_west-harbin-station-towers/9.html',
{transition: 'slideleft', changeHash: false});
}
function swiperightHandler(event){
JQuery.mobile.changePage('//www.spatialpractice.com/projects/1_west-harbin-station-towers/7.html',
{transition: 'slideright', changeHash: false});
}
});
</script>
Right now, clicking on the images work, but it does not detect swiping.
Any suggestions?