Jquery listview刷新两次与动态HTML奇怪的行为

Question

好吧，所以我已经搞砸了 2 天，我这辈子都想不通。基本上，我动态生成了附加到静态<ul> 的<li> 条目，然后调用 .listview('refresh',true) 函数。

第一代很好，第二代在已经列出的元素上搞砸了填充，但显示新列出的元素就好了。

我还有一个“显示更多”按钮，用于检索这些动态生成的条目，然后更新自身以反映新的偏移量。所以这里是代码。

HTML：

<div data-role="page" id="librarysearch" data-theme="a">
<div data-role="header" data-position="inline"></div>
<div data-role="content">
    <div>
        <a href="javascript:applib.libraryfinished();" data-role="button" data-inline="true" data-transition="fade" data-icon="arrow-l">Finished</a>
        <a href="javascript:applib.showlibraryplaylist();" data-role="button" data-inline="true" data-transition="fade">Playlist</a>
        <input id="librarysearchinput" size="60" onkeypress="if (event.keyCode == 13) applib.searchlibraryservers();" type="search" />
        <a href="javascript:applib.searchlibraryservers();" data-icon="search" data-inline="true" data-role=button>Search</a>
        <ul data-role="listview" id="libraryartistresults" name="libraryartistresults" data-theme="a"></ul>
        <div id="showmoreartists"></div>
    </div>
</div>
<div data-role="footer" data-position="inline">
</div>

列表元素的初始生成：

this.searchlibraryservers = function(offset)
{
    window.$("#librarysearchinput").blur();
    var query = window.$("#librarysearchinput").val();
    if (query !== "")
    {
        if (sonicservers.length > 0)
        {
            if (!libraryisdynamic)
                libraryserverid = selectedsonicserverid;
            remoteapp.searchserver(libraryserverid, query + "*", {songCount: 51}, function(results)
            {
                var htmlout = "";
                var buttonhtml = "";
                if (results && results.success)
                {
                    var i;
                    librarysearchresults = results.response;
                    htmlout += "<li data-role=\"list-divider\">Artists</li>";
                    for (i in librarysearchresults.artists)
                        htmlout += "<li><a href='javascript:applib.libraryartist(" + librarysearchresults.artists[i].id + ");'>" + librarysearchresults.artists[i].name + "</a></li>";
                    if (countProperties(librarysearchresults.artists) > 1) // just set to 1 for testing
                        buttonhtml += "<a href=\"javascript:applib.showmoreartists('"+query+"', '20')\" type=\"button\">Show More</a>";
                    window.$("#libraryartistresults").append(htmlout);
                    window.$("#libraryartistresults").listview('refresh', true);
                    window.$("#showmoreartists").html(buttonhtml).trigger('create');
                }
            });
        }
    }
};

这会生成以下 html：

<li data-role=\"list-divider\">Artists</li>
<li><a href='javascript:applib.libraryartist(7);'>Christian Altenburger, violin, German Bach Soloists, Helmut Winschermann</a></li>
<li><a href='javascript:applib.libraryartist(14);'>Eckart Haupt, flute; Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(15);'>New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(16);'>Burchard Glaetzner, oboe; New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(81);'>John Elwes, David Thoma, Bach Collegium Japan and Masaaki Suzuki</a></li>
<li><a href='javascript:applib.libraryartist(125);'>1734 Bach</a></li>
<li><a href='javascript:applib.libraryartist(131);'>1731 Bach</a></li>

对于按钮：

<a href=\"javascript:applib.showmoreartists('bach', '20')\" type=\"button\">Show More</a>

这一切看起来都很好，实际上显示也很好，但是当我单击显示更多时，它基本上与初始结果相同，只是考虑了偏移：

this.showmoreartists = function(query, offset)
{
    var htmlout = "";
    var buttonhtml = "";
    remoteapp.searchserver(selectedsonicserverid, query + "*", {artistOffset: offset}, function(results)
    {
        librarysearchresults = results.response;
        for (var i in librarysearchresults.artists)
            htmlout += "<li><a href='javascript:applib.libraryartist(" + librarysearchresults.artists[i].id + ");'>" + librarysearchresults.artists[i].name + "</a></li>";
        if (countProperties(librarysearchresults.artists) > 1) //just set to 1 for testing
        {
            buttonhtml += "<a href=\"javascript:applib.showmoreartists('"+query+"', '"+(Viewbiquity.math.tonumber(offset)+20)+"')\" type=\"button\">Show More</a>"; 
        }
        else
        {
            window.$("#showmorebutton").hide();
        }
        window.$("#showmoreartists").html(buttonhtml).trigger('create');
        window.$("#libraryartistresults").append(htmlout);
        window.$("#libraryartistresults").listview('refresh', true);
    });
};

它附加到“libraryartistresults”的新生成的 html 看起来不错，（由于测试设置，结果是相同的，它应该是这个问题的一个有争议的点，但因为列表视图不应该关心它是一样。

<li><a href='javascript:applib.libraryartist(7);'>Christian Altenburger, violin, German Bach Soloists, Helmut Winschermann</a></li>
<li><a href='javascript:applib.libraryartist(14);'>Eckart Haupt, flute; Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(15);'>New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(16);'>Burchard Glaetzner, oboe; New Bach Collegium Musicum, Max Pommer</a></li>
<li><a href='javascript:applib.libraryartist(81);'>John Elwes, David Thoma, Bach Collegium Japan and Masaaki Suzuki</a></li>
<li><a href='javascript:applib.libraryartist(125);'>1734 Bach</a></li>
<li><a href='javascript:applib.libraryartist(131);'>1731 Bach</a></li>

按钮 html 看起来也不错：

<a href=\"javascript:applib.showmoreartists('bach', '60')\" type=\"button\">Show More</a>

我什至尝试在 UL 中使用“style="white-space:normal;"。

TL:DR 这是我认为最相关的代码

静态 HTML：

<ul data-role="listview" id="libraryartistresults" name="libraryartistresults" data-theme="a"></ul>
<div id="showmoreartists"></div>

HTML 更新：

window.$("#showmoreartists").html(buttonhtml).trigger('create');
window.$("#libraryartistresults").append(htmlout);
window.$("#libraryartistresults").listview('refresh', true);

生成的 HTML 示例：

<li><a href='javascript:applib.libraryartist(125);'>1734 Bach</a></li>
<li><a href='javascript:applib.libraryartist(131);'>1731 Bach</a></li>

这可能是一些简单的疏忽，但在这一点上我被卡住了。我会继续挖掘，也许附加是将<li> 放在</ul> 之后

感谢您阅读本文，我知道这是一篇很长的文章，感谢您抽出时间来完成这一切。

Answer 1

我会被诅咒的......答案非常简单：

更改window.$("#libraryartistresults").listview('refresh', true); 至：window.$("#libraryartistresults").listview('refresh');

所以...不确定是因为 jQM 1.2，还是我的框架出现了一些奇怪的问题，但它 100% 修复了它。

我要特别感谢 ezanker 抽出时间分析并编写了一个 JSFiddle 示例供我使用。