Jquery mobile swipe

Question

I have tabs within a dynamic page. The tabs works great when pressed but I would like to add a swipe function to it so that users can also swipe to next tab.

Here is my attempt of trying to make the swipe function work

function goToMatchDetailPage(matchHome, matchAway){
    first_part_id = matchHome.substring(0,2);
    sec_part_id = matchAway.substring(0,2);
    var id = first_part_id.concat(sec_part_id);
    //create the html template
    var matchPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>"
      + matchHome + "</h1></div><div data-role='content'><div data-role='tabs'>"
  + "<div data-role='navbar'>"
  +  "<ul>"
  +    "<li><a href='#fragment-1'>" + matchHome + "</a></li>"
  +   "<li><a href='#fragment-2'>" + matchAway + "</a></li>"
  +  "</ul>"
  + "</div>"
  + "<div id='fragment-1'>"
  +  "<p>This is the content of the tab 'One', with the id fragment-1.</p>"
  + "</div>"
  + "<div id='fragment-2'>"
  +  "<p>This is the content of the tab 'Two', with the id fragment-2.</p>"
  + "</div></div></div>");

    //append the new page to the page contanier
    matchPage.appendTo($.mobile.pageContainer);

    //go to the newly created page
    $.mobile.changePage(matchPage);

Here is the ppart that doesn't work

$(function(){
// Bind the swipeleftHandler callback function to the swipe event on div.box
$( "div" ).on( "swipeleft", swipeleftHandler );

// Callback function references the event target and adds the 'swipeleft' class to it
function swipeleftHandler( event ){
//go to the newly created page
    $.mobile.changePage('#fragment-2');
 }
});

}

!

Answer 1

Try using event delegation:

Because fragment-1 does not exist at the time you are creating the handler, you assign the handler to the document and delegate it to any child elements called fragment-1 that exist now or will exist in the future.

To make it more generic, you can assign classes to the div and delegate to the class instead of an id...

UPDATE

You can't use changepage to go between tabs, instead use the tabs widget active property(http://api.jqueryui.com/tabs/#option-active):

$(document).on("pagecreate", "#page1", function () {
   $("#btngo").on("click", function(){
        goToMatchDetailPage('Liverpool', 'Southhampton');    
    });

    $(document).on("swipeleft", "#fragment-1", function(){    
           $(this).parents("div [data-role=tabs]").tabs( "option", "active", 1 );    
    } );
        $(document).on("swiperight", "#fragment-2", function(){    
           $(this).parents("div [data-role=tabs]").tabs( "option", "active", 0 );    
    } );         
});

Here is a DEMO

The swipe code is assigned to the document and then delegated to the dynamic div. When you swipe on a tab div, we find its parent that is the tab widget container and then set its active tab option to change tabs.

Answer 2

I'm easier than the others.. It's not the whole solution, but you can get my point.

Option 1

   $(document).on("swipeleft", '#page1', function () {
        $('#fragment-2').trigger('click');
                });

Option 2

   $(document).on("swipeleft", '#page1', function () {
        $(this).find("div [data-role=tabs]").tabs( "option", "active", 1 );
                });

Not sure about which one is better thought :)