1

私はiScroll4（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プラグインが機能しません。動作が停止した後、ページを更新するだけで、新しい画像ですべてが再び動作します。

私が持っているもののより良い例については：

ここに画像の説明を入力してください

誰かが何が悪いのか、そして/または修正を見ることができるなら、私に知らせてください-私はすっごく感謝します！

****私の試み****

**loaded()**AJAXがアップロード後に画像パネルを更新した直後にiScroll関数を呼び出すことで、問題が解決するかもしれないと思いました...しかし、そうではありませんでした!!

4

1 に答える 1

1

iScrollのrefreshメソッドを試しましたか？

ドキュメントから

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 に答える