Jquery 列表视图刷新两次与动态行为异常 HTML

Question

好吧，我已经为此纠结了 2 天，但终究还是想不通。基本上我已经动态生成 <li> 条目附加到静态 <ul>，然后调用 .listview('refresh',true) 函数。

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

我还有一个 "show more" 按钮可以检索这些动态生成的条目，然后更新自身以反映新的偏移量。所以这是代码。

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>

之后

感谢您阅读这篇文章，如果您阅读了这篇文章，那是一篇很长的文章 post 我知道，感谢您抽出宝贵的时间来完成这一切。

Answer 1

好吧，我会被诅咒...答案非常简单：

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

所以...不确定是由于 jQM 1.2 还是我的框架发生了一些奇怪的事情，但它已 100% 修复了它。

我要特别感谢 ezanker 花时间分析和编写一个 JSFiddle 示例供我使用。

Jquery 列表视图刷新两次与动态行为异常 HTML

Jquery listview refresh twice acting strangely with dynamic HTML

javascript

listview

dynamic

jquery-mobile