滑动事件阻止导航

时间:2015-02-11 16:34:27

标签: javascript jquery

我的移动页面显示的图像大于屏幕,因此用户需要向右滑动才能看到整个图像(按预期)。我想在用户滑动时放入隐藏导航div的事件:

<script type="text/javascript">
      $(document).on('pageinit', '#main_page', function() {
        $('#container').on("swipe", function () {
            $('#arrow').remove();
        });
      });
</script>


<body>
<div data-role="page" id='main_page'>
<div id="arrow">
    <div>Swipe</div>
    <img src="rt_arrow.png"></img>
</div>
<div id="container" style="width:100%; height:340px;">
</div>
</div>

</body>

除了滑动不再移动图像/视图外,这是有效的。我正在iphone上测试,虽然我希望它能跨平台工作。

编辑:

我测试了这个:

<script type="text/javascript">
      $(document).on('pageinit', '#main_page', function() {

      });
</script>

图像仍然无法导航,因此问题不在于删除vs隐藏或与div本身相关。

2 个答案:

答案 0 :(得分:0)

问题是你是用

从DOM中删除元素

$(&#39;#箭头&#39)。除去()

您需要做的是

$(&#39;#箭头&#39)。隐藏()

答案 1 :(得分:0)

我头脑中有这个:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

删除第一个链接修复了问题。如果有人想解释为什么作为答案,我会很乐意接受它。