I want use jQuery mobile's swiperight event in bination with an image, which doesn't seem to function.

HTML:

<div id="one"><img src=".png"/></div>
<div id="two">works</div>

JS:

$("#one").on("swiperight", function() {
    alert("does not work");
});
$("#two").on("swiperight", function() {
    alert("works");
});

JSFiddle

I want use jQuery mobile's swiperight event in bination with an image, which doesn't seem to function.

HTML:

<div id="one"><img src="http://jquerymobile./wp-content/uploads/2012/09/jquery-mobile-logo-03.png"/></div>
<div id="two">works</div>

JS:

$("#one").on("swiperight", function() {
    alert("does not work");
});
$("#two").on("swiperight", function() {
    alert("works");
});

JSFiddle

• javascript
• jquery
• html
• css
• jquery-mobile

2 Answers 2

I'm quite sure only desktop browser have this issue as mobile browsers usually don't drag images on swipe.

The solution suggested here prevents dragging your image in all browsers:

$('img').on('dragstart', function(event) {
    event.preventDefault();
});

So here is your new working fiddle: http://jsfiddle/4CbEQ/1/

You need to prevent image dragging, here's a working example: http://jsfiddle/Gajotres/SgUZK/

$(document).on('pagebeforeshow', '#index', function(){   
    $('img').on('dragstart', function(event) { event.preventDefault(); });

    $("#one").on("swiperight", function() {
        alert("does not work");
    });
    $("#two").on("swiperight", function() {
        alert("works");
    });
});