I have a problem with jQueryMobile, i search for answer many hours and nothing works :(
I have power by making a swipe left or right to move the next or previous item.
The above code works fine but after a while it becomes insane.
I'm on "Section A", I swipe right and I "Section B", I swipe left I return to "A", then I swipe right again and I go to "C"
and once on "C" if I swipe again is the carousel that connects
I pass from page C to A, then I go back to B returns C etc ...
and after a decade of change, it stops on a page and I swipe this is more an effect totally crazy scrolling display
the next and prev are urls
in html
<div data-role="page" data-dom-cache="false" class="actus-page" id="news" data-theme="a" data-next="http://wip17.kenjidev.com/n/39409" data-prev="http://wip17.kenjidev.com/n/39423" data-title="La vitalité de la traduction, levier décisif de la diversité éditoriale">
if I put the line loadpage, this charge has an infinite ajax pages (there are over 50 000 items ..)
and js
$( document ).on( "pageinit", "[data-role='page'].actus-page", function() {
var page = "#" + $( this ).attr( "id" ),
next = $( this ).jqmData( "next" ),
prev = $( this ).jqmData( "prev" );
if ( next ) {
//$.mobile.loadPage( next + ".htm" );
$( document ).on( "swipeleft", page, function() {
console.log(next +' : ' + page + ' : ' + prev );
$.mobile.changePage( next , {transition: "slide"});
});
}
if ( prev ) {
$( document ).on( "swiperight", page, function() {
console.log(prev +' : ' + page + ' : ' + next );
$.mobile.changePage( prev, { transition: "slide" , reverse: true } );
});
}
});
Thanks for help
Edit : solved
Thanks Omar for your help
finnally here code solve all problems:
$( document ).on( "pageinit", ".actus-page", function() {
var
$page = $(this),
page = "#" + $page.attr( "id" ),
next = $page.jqmData( "next" ),
prev = $page.jqmData( "prev" );
if ( next ) {
$page.on( "swipeleft", function() {
$.mobile.changePage( next , {transition: "slide"});
});
}
if ( prev ) {
$page.on( "swiperight", function() {
$.mobile.changePage( prev, { transition: "slide" , reverse: true} );
});
}});