【问题标题】:jQuery Mobile Listview not refreshingjQuery Mobile Listview 不刷新
【发布时间】:2013-10-01 14:06:21
【问题描述】:

在初始化或刷新我的 ul 时遇到问题 - 我在代码示例中使用的方法适用于我正在使用但不在这里的另一个函数...我一定遗漏了什么?

$(data).find("#HospitalDescriptions").find('th').filter(function(){
  if (this.innerHTML !== '') {
    var bgcolor = $( this ).css( "background-color" );
    var txtcolor = $( this ).css( "color" );
        if (bgcolor !== ''){
            $('#information').append('<div id="alertColors"><ul><li><span style="background-color:' + bgcolor + ';color:' + txtcolor + ';">' + this.innerHTML + '</span></li></ul></div>');
        } else {
            $('#information').append('<li>' + this.innerHTML + '</li>');
        }
  }
    $('#information').listview('refresh');   // not working!
});

这是我在代码中创建 ul 的 HTML:

<div data-role="page" data-theme="b" id="hospitals" data-add-back-btn="true">
    <div data-role="header">
        <h1>HOSP-HEADER</h1>
        <a class="ui-btn-right" id="infoButton" onclick="$('#locations').listview('refresh');">Refresh</a>
    </div><!-- /header -->

    <div data-role="content" data-theme="b" id="regions">   

        <div data-role="content">
            <h4>Information</h4>
            <ul data-role="listview" data-inset="true" id="information">
                <!-- AJAX CONTENT -->
            </ul>
        </div>

        <div data-role="collapsible">
            <h4>Regions I, II, III</h4>
            <ul data-role="listview" data-inset="true" id="region3">
                <!-- AJAX CONTENT -->
            </ul>
        </div>

        <div data-role="collapsible">
            <h4>Region IV</h4>
            <ul data-role="listview" data-inset="true" id="region4">
                <!-- AJAX CONTENT -->
            </ul>
        </div>

        <div data-role="collapsible">
            <h4>Region V</h4>
            <ul data-role="listview" data-inset="true" id="region5">
                <!-- AJAX CONTENT -->
            </ul>
        </div>

    </div>

【问题讨论】:

  • 嗯,.innerHTML 不返回 DOM 对象吗?如果是这样,那就难怪 if 查询大部分都失败了。
  • 如果查询没有失败,结果很好,只是没有在jquery mobile中格式化并显示为标准li
  • 您可能应该使用.each 而不是.filter 以提高代码的易读性和稳定性。 `.
  • 我的代码有效,.filter 达到了预期的效果,正在寻找格式问题的解决方案?
  • 您在ul 中插入ul,这将导致嵌套列表视图。发布您的 html 标记。

标签: jquery jquery-mobile jquery-mobile-listview


【解决方案1】:

#ID 丢失。 #information 是一个 ul,而不是最初创建的 div。删除了 ul 中的嵌套 div:

$(data).find("#HospitalDescriptions").find('th').filter(function(){
    if (this.innerHTML !== '') {
    var bgcolor = $( this ).css( "background-color" );
    var txtcolor = $( this ).css( "color" );
        if (bgcolor !== ''){
            $('#information').append('<li><span style="background-color:' + bgcolor + ';color:' + txtcolor + ';">' + this.innerHTML + '</span></li>');
        } else {
            $('#information').append('<li>' + this.innerHTML + '</li>');
        }
    }
    $('#information').listview('refresh');
}); 

【讨论】:

    猜你喜欢
    • 2012-07-19
    • 2013-05-12
    • 1970-01-01
    • 1970-01-01
    • 2012-05-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多