为什么我的动态添加的元素没有用 jqm 和 phonegap 显示？

Question

所以，我在 phonegap+jqm 应用程序上工作了一段时间。我一直在用我的安卓手机、一个黑莓模拟器（os7）和一个黑莓设备（os5）进行测试。我的应用程序只是使用 ajax 调用从 Web 服务中获取一些数据，并使用这些数据动态创建一些页面，其唯一目的是显示该数据。

工作原理：Ajax 调用成功并且检索到的数据符合预期。还正确应用了 jqm 样式（通过使用通常的触发器“创建”和“刷新”）。整个应用程序在我的 android 设备和带有 os7 的 bb 模拟器中运行良好。

什么不起作用：动态创建和附加的元素永远不会显示，而是旧元素（应该已被删除）保留在那里。只有在使用 os5 的 bb 进行测试时才会发生这种情况。

现在，一些代码。在触发 ajax 调用时，我使用了几个函数来完成所有工作。这是每个页面的标准程序：

当从调用中接收到数据时，响应被传递给特定的处理程序，该处理程序完成从响应中获取数据的工作：

function processListElements(response){
    alert("processListElements Start"); // THIS IS EXECUTED
    $('#anagTableList li[data-role="button"]').remove();

    $(response).find('return').each(function(){
alert("inside responseFind"); // THIS IS NEVER SHOWN            
var myNewLI=getFormattedLI($(this).find('codice').text(),$(this).find('responsabile').text());
        $('#anagTableList').append(myNewLI).listview('refresh');

    });

    $('#tablePage').trigger('create');
    $('#anagTableList').listview('refresh');
            alert("processListElements End"); // THIS IS SHOWN!
}

如您所见，新项目是使用另一个函数创建的，该函数正确格式化元素：

function getFormattedLI(codice,responsabile){
    var myFormattedLI = '<li data-role="button" data-icon="arrow-r" data-iconpos="right">'+
                            '<p>'+codice+' - '+responsabile+'<\/p>'+
                        '<\/li>';

    return myFormattedLI;
}

最后，这是该页面的标记：

<div id='tablePage' data-role="page">

<div data-theme="a" data-role="header">
    <h1 >Commesse Tigre</h1>
</div><!-- /header -->

<ul id='anagTableList' data-filter="true" data-theme="a" data-role="listview" data-inset="true">
    <a href="#" id="advancedSearch" data-theme="c" style="color:#FF8C90;text-decoration:none">advanced search</a>
    <li id='tableHeader' data-role="header">CODICE - RESPONSABILE - ANNO</li>

</ul>



<div data-theme="a" data-role="footer">
    <div class="ui-grid-b">
        <div class="ui-block-a"><a href="#" id="pageLeft" data-role="button" data-icon="arrow-l" data-iconpos="notext" style="margin-top:7px;">Previous page</a></div>
        <div class="ui-block-b" style="text-align:center;margin-top:15px;">Page<p id='currentPage' style="display:inline">1</p> of <p  style="display:inline" id='totalPages'>2</p></div>
        <div class="ui-block-c"><a href="#" id="pageRight" data-role="button" data-icon="arrow-r" data-iconpos="notext" style="float: right;margin-top:7px;">Next page</a></div>
    </div><!-- /footer -->
</div>

那么，为什么我更改页面时没有显示我的新列表项？难道我做错了什么？

非常感谢任何帮助，我已经为此苦苦挣扎了一段时间，但找不到任何解决方案。另外，很抱歉这个问题很长:)

编辑 1：我已经尝试将所有 jquery 函数更改为纯 javascript。什么都没有改变（不是我对此寄予厚望）

编辑 2：仍在为此苦苦挣扎，而且每次都变得陌生。我一直在做一些测试应用程序，它们的工作方式完全相同（一个 ul 被附加了新的 li）并且它们都可以工作，除了具有上述发布代码的应用程序，其中元素仍然没有显示。

编辑 3：我发现 response.find 函数中的所有内容都不会被执行，但代码不会阻塞，因此在函数中放置警报永远不会显示。编辑代码以更好地解释。

编辑 4：我认为可以说“查找”功能没有找到任何“返回”节点是很安全的。响应来自轴 2 Web 服务，每个返回节点都标记为“ns:return”。这对我的 android 和 bb7 设备来说不是问题，但显然是我的 bb5 的问题。将 find 更改为 "ns:return" 解决不了任何问题。我好累。救命！

编辑 5（最后）：我无法解决问题，但我确实找到了。现在问题已减少为能够在 jquery 或 javascript 中找到具有命名空间的节点。 SO中有很多问题可以解决这个问题，但直到现在对我来说没有任何效果，因为jQuery 1.7已经打破了所有的解决方法。

Answer 1

您好，我有一个工作示例，我在其中创建了一个字符串中的所有 HTML 列表元素 (li)（假设 arrLI 是一个 li 元素字符串数组）：

$('#mylist').append(arrLI.join(""));
$('#mylist').listview('refresh');
$('#mylist').trigger('create');

并删除每个元素的刷新

Answer 2

我终于解决了这个问题。 xml 响应中的 each 返回是这样的：

     <ns:return xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="ax21:CommessaBase">
        <ax21:codice>CODICE0</ax21:codice> 
        <ax21:responsabile>PERSON0</ax21:responsabile> 
     </ns:return>

所以，上面的代码，它正在寻找返回，没有找到任何东西。我尝试了几件事，最后，起作用的功能是这样的：

     function processListElements(response){

    $('#anagTableList li[data-role="button"]').remove();
    $('#anagTableList').listview('refresh');

    $(response).find('*').filter('ns\\:return').each(function(){

        var myNewLI=getFormattedLI($(this).find('*').filter('ax21\\:codice').text(),$(this).find('*').filter('ax21\\:responsabile').text());
        $('#anagTableList').append(myNewLI);
        $('#anagTableList').listview('refresh');

    });

}