我的.on Swipe只能在它休息之前工作一次并且必须刷新一切--JQuery Mobile / Javascript

Question

所以当我点击我的图像时，我设法为我设置了一个脚本，它显示了一个弹出窗口，当我向左或向右滑动图像时，它会在我的javascript中显示隐藏的图像。 然而，当我到我的索引页面，我去了房子的HTML。 当我点击照片时，滑动功能在我必须进入我的javascript文件之前不起作用，并且在它再次工作之前基本上重写了滑动功能，但是在我回到我的索引页面之后又打破了。

这是我网站的索引页面： http ： //titan.dcs.bbk.ac.uk/~aaldib01/mad/madfma/index.html

然后Houses> 2 Bedroom terraced> house1.html

有没有办法让我解决问题或改善我的javascript为此不再是一个问题？

谢谢。

*注意我认为存在图像代码的问题。 （我删除了大部分其他代码，因为它不影响它）

我已经尝试过使用.bind（“swiperight”，function（）但是它给了我相同的结果。在我转到index.html >> house1.html之后它工作一次然后不起作用

这是house1.html代码（data-role =“content”：


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
    <link rel="stylesheet" href="css/themes/blue.min.css" />
    <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="images.js"></script>
    <title>House 1</title>
</head>
<body>
    <div data-role="page" id="house1" data-theme="a" data-dom-cache="true">

        <div data-role="content">
            <a href="#popupImg" data-rel="popup" data-position-to="window" data-transition="pop">
                <img src="pictures/houses/house1/image1.PNG"/ style="width: 50%;"/>
                <div data-role="popup" id="popupImg" data-theme="a" class="ui-corner-all">
                <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
                <img src="pictures/houses/house1/image1.PNG" style="width: 100%;" />
            </a>
                </div>

        <div data-role="footer" data-position="fixed">
            <div data-role="navbar" data-id="footernav">
                <ul>
                    <li><a href="about.html">About</a></li>
                    <li><a href="">Favourites</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
        </div>
    </div> 
</body>
</html>

这是javascript文件：


$(document).ready(function () {
    var i = 0;
    var imgURL = [];

    imgURL.push('pictures/houses/house1/image1.PNG');
    imgURL.push('pictures/houses/house1/image2.PNG');
    imgURL.push('pictures/houses/house1/image3.PNG');
    imgURL.push('pictures/houses/house1/image4.PNG');

    $("#house1").on("swiperight",function () {
        if (i < (imgURL.length - 1)) {
            i++
        } else {
            i = 0;
        }
        var imgStr = "<img src=" + imgURL[i] + " style='width:100%'>";
        $('#popupImg').html(imgStr);
    });

    $("#house1").on("swipeleft",function () {
        if (i > 0) {
            i--
        } else {
            i = (imgURL.length - 1);
        }
        var imgStr = "<img src=" + imgURL[i] + " style='width:100%'>";
        $('#popupImg').html(imgStr);
    });


});

Answer 1

问题是，如果您在索引页面上启动并导航到House 1，则不会加载您的image.js脚本。您可以在直接加载House 1时查看站点的来源来检查这一点（它会在那里）而不是从索引开始并浏览到House 1（它将从<head> ）。

原因是jQuery Mobile使用AJAX在页面之间导航。 默认情况下，每个页面请求只会更新<body>元素，而不会更新<head> （可以在此jQuery Mobile演示页面上找到更多信息）。

该页面上引用了一些解决方案：

构建jQuery Mobile站点时最简单的方法是在每个页面的头部引用同一组样式表和脚本。 如果您需要加载特定页面的特定脚本或样式，我们建议将逻辑绑定到pageinit事件（详细信息如下），以便在创建特定页面时运行必要的代码（可以通过其id属性或数字来确定）其他方式）。

特定于页面的脚本的另一种方法是在未定义data-role=page元素时在body元素的末尾包含脚本，或者在第一个data-role=page元素内包含脚本。

最终，由您决定哪种方法对您的特定用例最有意义。

我的.on Swipe只能在它休息之前工作一次并且必须刷新一切--JQuery Mobile / Javascript

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-04-09 16:10:52

我的.on Swipe只能在它休息之前工作一次并且必须刷新一切--JQuery Mobile / Javascript

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-04-09 16:10:52

解决方案1
0 已采纳 2019-04-09 16:10:52