Question

我的移动页面显示的图像大于屏幕，因此用户需要向右滑动才能看到整个图像（按预期）。我想在用户滑动时放入隐藏导航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本身相关。

Answer 1

问题是你是用

从DOM中删除元素

$（＆＃39;＃箭头＆＃39）。除去（）

您需要做的是

$（＆＃39;＃箭头＆＃39）。隐藏（）

Answer 2

我头脑中有这个：

<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>

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

滑动事件阻止导航

2 个答案: