jQueryMobile無法向下滾動到動態創建的頁面內容

Question

使用jQueryMobile和iscrollview插件，我無法向下滾動包含動態添加內容的頁面。 這是我的HTML：

<div data-role="content" class="care-plan-fields"  id="scroll-wrapper" data-iscroll>

                <div data-role="fieldcontain" id="field1">
                    <label for="field1Text" id="field1Label"></label>
                    <textarea cols="40" rows="2" id="field1Text" spellcheck="true" autocorrect="on" autocapitalize="on"></textarea>
                </div>


                <div data-role="fieldcontain">
                    <label for="field2Text" id="field2Label"></label>
                    <textarea cols="40" rows="2" id="field2Text" spellcheck="true" autocorrect="on" autocapitalize="on"></textarea>
                </div>


                <div data-role="fieldcontain">
                    <label for="field3Text" id="field3Label"></label>
                    <textarea cols="40" rows="2" id="field3Text" spellcheck="true" autocorrect="on" autocapitalize="on"></textarea>
                </div>


                <div data-role="fieldcontain" id="field4">
                    <label for="field4Text" id="field4Label"></label>
                    <textarea cols="40" rows="2" id="field4Text" spellcheck="true" autocorrect="on" autocapitalize="on"></textarea>
                </div>

            </div>

我將數據添加到pagebeforeshow處理程序中的textareas中，如下所示：

$("label[for='field1Text']").text(carePlan.fields[0].label);
$('#field1Text').val(carePlan.fields[0].text);

然后立即在滾動視圖上調用refresh以使其調整大小：

$('#scroll-wrapper').iscrollview("refresh");

但是，雖然調整了textareas的大小以適應添加到其中的文本的大小，但是頁面似乎沒有調整大小，並且如果添加的數據超出了頁面底部，則無法向下滾動。

如果我離開該頁面並再次返回，則可以完全向下滾動。

我認為這是一個渲染問題，無法弄清楚如何重新渲染頁面而又不回頭。 （請注意，iscrollview插件可用於我的應用程序中的其他列表視圖，但是它們沒有像這樣動態添加數據。）有人有什么想法嗎？ 干杯

Answer 1

這些其他列表視圖還是該頁面的主要內容div嗎？

iscroll可能與jquery mobile的布局設置發生沖突-調整div的大小以適合jquery mobile的內容，然后iscroll將其作為屏幕上的可用區域，即使實際上並非全部可見。 內容div附帶的即席滾動也不起作用，因為iscroll捕獲了所有觸摸事件。