jQuery Mobile -事件不会在页面容器上触发

Question

我想在加载页面时滚动到特定的div。Jquery Mobile 1.4。如果您只是加载页面，它可以正常工作，但如果您使用API加载，则无法工作。

使用API加载。

$('#schedule-a-call-collapsible').on("collapsibleexpand", function(event, ui){
        $( "body" ).pagecontainer( "change", 'schedule-a-call-mobile.html', {transition: 'slideup'} );
}

滚动条只是

Behave.prototype.doScrollTop = function(element) {
  var pos = $(element).offset().top;
  pos -= $('div.ui-header-fixed').outerHeight();
  $("html, body").animate({ "scrollTop": pos }, 500);
};

事件不会被触发。

jQuery('body').on("pagecontainershow", function (e, ui) {
    console.log("scrolling timezone");
    console.log(jQuery('#schedule-a-call-timezone').offset().top);
    $('#schedule-a-call-timezone-col').collapsible('expand');
    behave.doScrollTop(jQuery('#schedule-a-call-timezone-col'));
});

基本原理是，在扩展可折叠性时，流动变得更加复杂。我想隐藏其他可折叠选项，除非有人滚动并逐步完成工作流，就好像它是一组新的页面。

谢谢约翰。

Answer 1

解决方案是使用location.href。

$('body').delegate('#collapsible-schedule-a-call', "collapsibleexpand", function (e, ui) {
  e.preventDefault();
  document.location.href = 'schedule-a-call-mobile.html';
});

侦听的事件已更改，因此它完全避免了pagecontainershow事件。

根本原因是试图使一个网站的移动过渡不同于桌面过渡(移动向左滑动等)。当涉及到其他框架时，Jquery mobile是一个挑战。