jquery-mobile - 向 DOM 添加元素后，如何调整 jQuery Mobile 页面的大小？

Question

我有一个带有固定页脚的 jQuery Mobile (1.0.1) 页面:

<footer data-role="footer" data-position="fixed">
    <a href="#">Click Me!</a>
</footer>

当我向 DOM 添加元素时，页脚栏(显然不应该移动)从屏幕底部滚动 - 根据添加到 DOM 的元素的高度。在(灰色)页面的前一端和页脚栏的新位置之间还有白色背景。

如果我向下滚动并向上滚动，则会更正格式。

我使用的是 Chrome，但它也出现在 Mobile Safari 和 IE 中。

向 DOM 添加元素的代码是:

$("footer a").click(function () {
    $("div[data-role='content']").append($("<button>Button A</button>"), $("<button>Button B</button>"), $("<button>Button C</button>"), $("<button>Button D</button>"));

    $("div[data-role='content']").trigger("create");
});

我错过了什么？

Answer 1

您是否尝试过调用 JQM updatelayout 事件？

看到这个 page了解更多信息。

尝试这样的事情:

$("div[data-role='content']").trigger("create").trigger( 'updatelayout' );