1

我正在使用一个名为 iScroll 4 ( iScroll4 Docs ) 的 jQuery 插件，它允许我触摸、滑动、捏合和滚动滚动面板。这个滚动面板的内容是通过 AJAX 加载的，包括一个水平的图像列表。

这一切在第一次加载时工作正常，但如果我上传更多图像并让 AJAX 更新面板，iScroll 插件就不再工作了！

这是我的代码......这有效：

// the JS ////////////////////////

<script src="js/iscroll-lite.js"></script>
<script>

// start iScroll

var myScroll;
function loaded() {
    setTimeout(function () {
        myScroll = new iScroll('scroll-uploader-photos');
    }, 100);
}
window.addEventListener('load', loaded, false);

// load images to panel for first time

load_previous_uploads(<%=Session("article_id")%>);

// load images function

function load_previous_uploads(article_id) {
    if (article_id != "") {
        var data_str = "article_id="+article_id
        $.ajax({
        type : 'GET',
        data : data_str,
        url : 'ajax/get-uploader-photos.asp',
        dataType : 'html',
        success : function(data) {
            if (data != "") {
                $(".upload_result").html(data);
            }
        }
        });
    }
}
</script>

// the html //////////////////

<div class="upload_result"></div>

// the ajax content from external ASP page (get-uploader-photos.asp)

<div class="scroll-uploader-photos">
    <img><img><img><img><img><img><img><img><img><img><img><img><img>
</div>

如果我现在去上传更多图像，并且成功运行该功能load_previous_uploads()，则 iScroll 插件将无法正常工作，因为滑动面板已更新，并且开始困扰我为什么无法修复它。在它停止工作后，我可以简单地刷新页面并使用新图像再次工作。

对于我所拥有的更好的例子：

在此处输入图像描述

如果有人可以看到问题所在和/或可以看到修复，请告诉我 - 我将非常感激！

**** 我的尝试 ****

我想通过在上传后 AJAX 更新图像面板后立即调用 iScroll 函数**loaded()**，它可能会解决问题......但它没有！

4

1 回答 1

1

你试过iScroll的刷新方法吗？

从文档

ajax('page.php', onCompletion);

function onCompletion () {
    // Here modify the DOM in any way, eg: by adding LIs to the scroller UL

    setTimeout(function () {
        myScroll.refresh();
    }, 0);
};
于 2012-06-19T18:11:21.853 回答