jQuery iScroll 4 - 将AJAX内容加载到滑动面板的问题

Question

我正在使用名为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插件随后不起作用，因为滑动面板已经更新，并开始误解为什么我无法解决它。在它停止工作后，我可以简单地刷新页面，然后使用新图像再次工作。

有关我所拥有的更好的例子：

如果有人能看到错误和/或可以看到修复，请告诉我 - 我会非常感激！

**** MY ATTEMPT ****

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

Answer 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);
};