Question

I’ve been having some trouble recognising a swipe event on a popup using jquery mobile. I have successfully implemented swiping between pages but can’t seem to get it working on a popup.

My popup contains an image and a close button. When I swipe it the page behind it gets swiped and the popup disappears. The callback function bound to the swipe event is never being called.

Here is my HTML code:

<a href="#vikingmanager1popup" data-rel="popup" data-position-to="window"><img src="images/vikingmanager1_thumb.jpg" />

<div data-role="popup" id="vikingmanager1popup" id="pic">
    <img class="popphoto" src="images/vikingmanager1.jpg" />
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
</div>

Here is my js:

$(document).on('swipe',"#pic",function() {
    console.log("Hello");
});

Answer 1

Ok seem to have solved it myself…

The ID should not have been placed on the div but on the image itself.