PhoneGap WebApp侧滑手势仅首页可用，跳转后需刷新才生效问题求助

嘿，这个问题我太熟了！之前用jQuery Mobile做PhoneGap项目时也踩过一模一样的坑😅。核心原因就是jQuery Mobile默认的AJAX页面加载机制——当你从#page1跳转到#page2时，#page2并不是重新加载整个页面，而是被动态插入到当前DOM中的。你一开始直接绑定在document上的事件虽然用了委托，但有时候会因为页面切换后的DOM状态、事件冒泡优先级问题失效，必须刷新页面让#page2成为初始DOM的一部分，事件才能正常触发。

最可靠的修复方案：利用页面生命周期事件绑定 #

jQuery Mobile提供了页面生命周期事件，其中pagecreate会在页面（无论是初始加载还是AJAX动态加载）完成DOM插入和初始化后触发。我们可以借助这个事件来给每个页面绑定手势，确保事件只在目标页面存在时生效：

// 给page1绑定左滑事件
$(document).on('pagecreate', '#page1', function() {
  $(this).on('swipeleft', function() {
    $("body").pagecontainer("change", "#page2");
  });
});

// 给page2绑定右滑和左滑事件
$(document).on('pagecreate', '#page2', function() {
  // 右滑返回page1
  $(this).on('swiperight', function() {
    $("body").pagecontainer("change", "#page1");
  });
  
  // 左滑跳转到下一页（补充你原来没写完的逻辑）
  $(this).on('swipeleft', function() {
    $("body").pagecontainer("change", "#page3"); // 示例跳转目标
  });
});

为什么这个方案有效？ #

• pagecreate事件会精准触发在每个页面完成初始化的时机，不管是首页还是AJAX加载的页面，都能确保目标页面的DOM元素已经存在，事件绑定不会“落空”。
• 直接把事件绑定在当前页面元素（$(this)就是对应的#page1或#page2）上，比全局委托更高效，还能避免非活跃页面的元素误触发事件。

备选方案：优化全局委托逻辑 #

如果你不想改绑定方式，也可以给全局委托的事件加一个判断，确保只在当前活跃页面触发：

$(document).on('swipeleft', "#page1", function() {
  // 检查page1是否是当前显示的活跃页面
  if($("#page1").hasClass('ui-page-active')) {
    $("body").pagecontainer("change", "#page2");
  }
});

$(document).on('swiperight', "#page2", function() {
  if($("#page2").hasClass('ui-page-active')) {
    $("body").pagecontainer("change", "#page1");
  }
});

不过这个方案不如pagecreate绑定可靠，因为全局委托可能会捕获到非活跃页面元素的手势事件，虽然加了判断，但还是有点冗余。

内容的提问来源于stack exchange，提问作者boskizzi