JQM 页面加载后 Touchswipe 未正确启动

Question

我正在使用 JQM 创建混合应用程序。其中一个页面是我使用 Touchswipe.

的图片库

如果我直接打开页面，一切正常。但是，如果我通过单击另一个页面的 link 导航到该页面，JQM 将使用 Ajax 加载该页面，并且 swipe 未正确初始化。如果我尝试滑动，我会收到此错误：

只有当我按下 F5 并重新加载页面时它才有效。

这是我使用的代码：

$(document).on( "pagecontainerbeforeshow", function( e, ui ) {
  Gallery.init();
});

var Gallery = {
  imgContainer: null,
  (...),

  init: function() {
    this.imgContainer = $('#imageContainer');
    (...)
    console.log('This msg shows');

    this.imgContainer.swipe({
        threshold        : 100,
        triggerOnTouchEnd: true,
        allowPageScroll  : "horizontal",
        swipeStatus      : function (event, phase, direction, distance, duration) {
            Gallery.swipe(event, phase, direction, distance, duration)
        }
    });
  },

  swipe: function(...){
    console.log('I only get this by hitting F5');
  }

};

非常感谢任何帮助！

Answer 1

事实证明这是脚本加载的顺序。但不像 described in this thread.

最初我是在我的图库页面上加载我的脚本：

// Header
<script src=jquery
<script src=jquery.mobile

//Footer
<script src=jquery.touchSwipe

但是因为 JQM 使用 Ajax 检索页面，所以永远不会加载 touchSwipe。因此，通过将它添加到我的索引，当 JQM 获取 apge 时它已经加载，我仍然需要在我的画廊页面上 "load it"，以防应用程序关闭并在该页面上重新打开。

JQM 页面加载后 Touchswipe 未正确启动

Touchswipe not initiated correctly after JQM page load

jquery

jquery-mobile

touchswipe