JQuery Mobile滑动功能仅生效一次问题求助及代码优化咨询

首先咱们来拆解下你遇到的核心问题：jQuery Mobile默认用AJAX加载页面，$(document).ready()只会在初始页面（比如你的index.html）首次加载时执行一次。当你从index页跳转到house1.html时，house1的DOM是通过AJAX动态插入到当前页面的，这时候$(document).ready()并不会再次触发，导致你写的滑动事件绑定代码根本没机会执行，滑动功能自然失效。而你重新编写滑动函数时，house1的DOM已经存在，绑定能生效，但返回再进入时，缓存的页面不会重新触发ready，问题就又出现了。

下面是具体的修复和优化方案：

1. 改用jQuery Mobile专属的页面初始化事件 #

把原来的$(document).ready()换成pagecreate事件（针对jQuery Mobile 1.4.5版本，这是推荐的页面初始化钩子），确保每次#house1页面被创建（不管是AJAX加载还是缓存加载）时，都会执行事件绑定逻辑。

2. 修复弹窗内容替换的bug #

你原来的代码会直接替换#popupImg的全部HTML，这会把弹窗右上角的关闭按钮也删掉，咱们调整成只替换弹窗里的图片元素，保留关闭按钮的交互。

3. 优化变量作用域（避免全局污染） #

把图片索引i存储在页面的data属性中，而不是用函数内的局部变量，这样即使页面被缓存，索引的状态也能正确维护。

修复后的images.js代码 #

// 监听#house1页面的pagecreate事件，确保页面加载/缓存时都能执行绑定
$(document).on("pagecreate", "#house1", function() {
    // 初始化图片数组，用数组字面量更简洁
    var imgURL = [
        'pictures/houses/house1/image1.PNG',
        'pictures/houses/house1/image2.PNG',
        'pictures/houses/house1/image3.PNG',
        'pictures/houses/house1/image4.PNG'
    ];
    
    // 把当前图片索引存在页面的data属性里，避免全局变量污染
    $(this).data('currentImgIndex', 0);

    // 把滑动事件绑定到弹窗区域（更精准，避免误触发整个页面的滑动）
    $("#popupImg").on("swiperight", function() {
        var currentIndex = $("#house1").data('currentImgIndex');
        // 计算下一张图片的索引，到达末尾就回到第一张
        currentIndex = (currentIndex < imgURL.length - 1) ? currentIndex + 1 : 0;
        // 更新页面存储的索引
        $("#house1").data('currentImgIndex', currentIndex);
        // 只替换弹窗里的图片，保留关闭按钮
        $("#popupImg img").attr('src', imgURL[currentIndex]);
    });

    // 绑定左滑事件
    $("#popupImg").on("swipeleft", function() {
        var currentIndex = $("#house1").data('currentImgIndex');
        // 计算上一张图片的索引，到达开头就回到最后一张
        currentIndex = (currentIndex > 0) ? currentIndex - 1 : imgURL.length - 1;
        // 更新页面存储的索引
        $("#house1").data('currentImgIndex', currentIndex);
        // 替换图片
        $("#popupImg img").attr('src', imgURL[currentIndex]);
    });
});

额外的HTML结构修复 #

你原来的house1.html里弹窗的HTML嵌套有问题，触发弹窗的<a>标签错误地包裹了弹窗本身，会导致交互异常，修正后的结构如下：

<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%;"/>
    </a>
    <!-- 弹窗独立成一个div -->
    <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%;" />
    </div>
</div>

为什么原来的.bind()方法也失效？ #

和直接用on()绑定到#house1的问题一样：当$(document).ready()执行时，#house1元素还没被AJAX加载到DOM中，所以绑定的事件找不到对应的元素，自然无法生效。而用$(document).on("pagecreate", "#house1", ...)可以确保在元素存在后再进行事件绑定。

内容的提问来源于stack exchange，提问作者user11335153