Javascript 滑动事件阻止导航_Javascript_Jquery

Javascript 滑动事件阻止导航

javascript jquery

Javascript 滑动事件阻止导航,javascript,jquery,Javascript,Jquery,我的移动页面显示的图像比屏幕大，因此用户需要向右滑动才能看到整个内容（如预期的那样）。我想加入一个事件，当用户滑动时隐藏导航div： <script type="text/javascript"> $(document).on('pageinit', '#main_page', function() { $('#container').on("swipe", function () { $('#arrow').remove();

我的移动页面显示的图像比屏幕大，因此用户需要向右滑动才能看到整个内容（如预期的那样）。我想加入一个事件，当用户滑动时隐藏导航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>


$（文档）.on（'pageinit'，'主页'，函数（）{
$（'#container'）。在（“滑动”，函数（）{
$（'#箭头'）。删除（）；
});
});
刷卡

除了滑动不再移动图像/视图外，此操作有效。我正在iphone上测试，尽管我希望它能够跨平台工作

编辑：

我通过以下方式进行测试：

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

      });
</script>


$（文档）.on（'pageinit'，'主页'，函数（）{
});

而且图像仍然无法四处导航，因此问题不在remove vs hide中，也不与div本身相关。

问题在于您正在使用从DOM中删除元素

$（'#箭头'）。删除（）

你需要做的是

$（“#箭头”）.hide（）

我脑子里有这样一个想法：

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

删除第一个链接修复了该问题。如果有人想解释原因作为回答，我很乐意接受

图像是否在#container DIV中？您是否尝试了

.hide（）

而不是

.remove（）

？图像以固定的位置放置在容器div的顶部，但图像div实际上不在容器内。没有区别--结果相同。请注意，我已将滑动附加到container div，而不是箭头。如果应关闭此问题或修改标题以更好地反映操作问题，请尝试。