我正在尝试使用Skinkers Labs的TouchSwipe插件与jQuery Mobile结合使用,我正在创建一个也采用响应式设计的移动网站。
TouchSwipe: 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站点的图像滑动示例代码中的所有辅助函数:
http://labs.skinkers.com/touchSwipe/demo/image_scroll.php
知道我为什么会看到这个错误吗?一旦我删除了jQuery Mobile javascript文件,该插件就能正常运行,但我需要jQuery Mobile用于此站点。
如果您愿意,我会很乐意发布更多代码。如果您有任何疑问或需要更多信息,请与我们联系。
提前感谢您的帮助!
答案 0 :(得分:8)
你的方式错了。你在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>
答案 1 :(得分:1)
我最终放弃了TouchSwipe并使用了iosSlider插件,它似乎运行得更好,并且在与jQuery mobile结合使用时没有遇到任何问题。
http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/
希望这可以帮助其他人解决同样的问题。
答案 2 :(得分:1)
这是由于jqm命名空间内的冲突造成的。 touchSwipe和jqm都使用相同的“滑动”,“滑动”等名称。我通过快速搜索替换更改了touchSwipe插件中的名称,以解决问题。显然这不是一个理想的解决方案,但它确实有效。