javascript-jQuery移动刷卡

我在动态页面中有标签.按下时这些选项卡效果很好,但是我想向其添加滑动功能,以便用户也可以滑动至下一个选项卡.

这是我尝试使滑动功能起作用的尝试

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);

这是不起作用的部分

$(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');
 }
});

}

！

解决方法:

尝试使用事件委托：

由于fragment-1在创建处理程序时不存在,因此可以将处理程序分配给文档,并将其委派给现在存在或将来将存在的称为fragment-1的所有子元素.

为了使其更通用,可以将类分配给div并委托给该类,而不是id.

UPDATE

您不能使用changepage在标签之间切换,而应使用tabs小部件的active属性(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 07001

刷卡代码已分配给文档,然后委托给动态div.在选项卡div上滑动时,我们找到其父级,即选项卡小部件容器,然后设置其活动选项卡选项以更改选项卡.

标签：jquery-mobile,swipe,javascript,jquery
来源： https://codeday.me/bug/20191121/2055293.html