jQuery Mobile 和 TouchSwipe jQuery 插件错误

Posted 2023-05-09

【中文标题】jQuery Mobile 和 TouchSwipe jQuery 插件错误

【英文标题】：jQuery Mobile & TouchSwipe jQuery Plugin Errors

【发布时间】：2012-04-05 09:35:36

【问题描述】：

我正在尝试将 Skinkers Labs 的 TouchSwipe 插件与 jQuery Mobile 结合在我正在创建的一个移动网站上，该网站也使用响应式设计。

触摸滑动： http://labs.skinkers.com/touchSwipe/

我遇到的情况是，我可以让 TouchSwipe 插件在移动设备上的普通页面上正常工作，但是一旦我添加了 jQuery Mobile js 文件，TouchSwipe 功能就不再起作用了。

这是我收到的 JS 错误（在 jquery-1.7.1.js 的第 3256 行）：

TypeError: 'undefined' 不是函数（评估 '( (jQuery.event.special[handleObj.origType] || ).handle || handleObj.handler ) .apply(matched.elem, args )')

这里是我在 html 中包含 javascript 的地方：

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe-1.2.5.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<script type="text/javascript">
    $("#divCheckingWrapper").live("pagecreate", function(event) 
        var swipeOptions = 
            swipeStatus: swipeStatus,
            allowPageScroll: "vertical"
        ;

        SWIPEABLE_NODES = $("#divCheckingSlider");
        SWIPEABLE_NODES.swipe(swipeOptions);

        CONTENT_WIDTH= SWIPEABLE_NODES.parent().width();
        MAX_NODES = SWIPEABLE_NODES.find("div.divCheckingSliders").length;
    );
</script>

<script type="text/javascript" src="js/jquery.mobile-1.1.0-rc.1.min.js"></script>

main.js 包含来自 TouchSwipe 站点的 Image Swipe 示例代码中的所有辅助函数：

http://labs.skinkers.com/touchSwipe/demo/image_scroll.php

知道为什么我会看到此错误吗？一旦我删除了 jQuery Mobile javascript 文件，插件就可以正常工作，但我需要 jQuery Mobile 用于该站点。

如果您愿意，我很乐意发布更多代码。如果您有任何问题或需要更多信息，请告诉我。

提前感谢您的帮助！

【参考方案1】：

你走错路了。您在 TouchSwipe 之后加载 JQM，尽管 TouchSwipe 应该覆盖 JQM。这就像在墙壁之前建造窗户。

我已经测试过，一切正常，无需更改任何命名。您需要做的就是在 TouchSwipe 之前包含 JQM。

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe-1.2.5.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

【讨论】：

:) 这也是我的问题。完美运行。谢谢！

【参考方案2】：

我最终放弃了 TouchSwipe 并使用了 iosSlider 插件，它似乎工作得更好，而且在与 jQuery mobile 结合使用时我没有遇到任何问题。

http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/

希望这将帮助其他人解决同样的问题。

【参考方案3】：

这是由于 jqm 命名空间内的冲突。 touchSwipe 和 jqm 都使用相同的“swipe”、“swipeleft”等名称。我通过快速搜索替换更改了 touchSwipe 插件中的名称，以解决问题。显然这不是一个理想的解决方案，但它确实有效。

【讨论】：

这就像为建筑物建造窗户，然后是墙壁，然后想知道为什么窗户会掉在地板上。您需要使用 TouchSwipe 覆盖 JQM，但由于加载文件的顺序，您正在以相反的方式执行此操作。阅读我的答案。