刷新 Jquery-mobile 中的属性更改？答案

【问题标题】：Refresh on attribute change in Jquery-mobile?刷新 Jquery-mobile 中的属性更改？
【发布时间】：2012-02-14 16:32:09
【问题描述】：

精简代码显示我可以更改属性，在本例中为 data-split-icon，但无法刷新。 Console.log 显示它已更改，chrome 开发人员工具中的元素视图也已更改。

http://jsfiddle.net/mckennatim/MQ9rj/“获取”按钮模拟以编程方式创建的列表。 “更改”按钮模拟更改属性。

刷新、列表视图、触发器、创建、页面创建我尝试了所有组合。没有任何效果

<!DOCTYPE html>
<html>
<head>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>   
</head>
<body>
    <div id="thelists" data-role="page">

        <div data-role="header">
            <a href="#" data-icon="back"  id="get" data-role="button" >get</a>
                <h2>TestPage</h2>
            <a href="#" data-icon="home" id="change" data-role="button">change</a>
        </div><!-- /header -->       
        <div data-role="content">   
            <ul id="list" class="current" data-split-icon="gear" data-role="listview" data-filter="false"></ul>
        </div><!-- /content -->
    </div><!-- /page -->
<script>
    $('#get').click(function() {
        for (i=1; i<6; i++){
            $('#list').append('<li><a>list</a><a class="orig">items</a></li>');
        }
        $('#list').listview('refresh');
        return false; 
    }); 
    $('#change').click(function() {
        console.log($('ul').attr('data-split-icon'));
        $('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
        console.log($('ul').attr('data-split-icon'));
        //$('#list').listview();
        //$('#list').listview('refresh');
        $('#thelists').trigger('create');
        $('#thelists').trigger('pagecreate');   
        $('#list').listview();
        $('#list').listview('refresh');
        return false; 
    });              
</script>    
</body>
</html>

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

看起来jQM也在子span标签上添加了一些标记，试试这样的

http://jsfiddle.net/phillpafford/MQ9rj/18/

$('#change').click(function() {
    console.log($('ul').attr('data-split-icon'));
    $('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
    console.log($('ul').attr('data-split-icon'));
    $("[data-icon=gear]").each(function() {
        var $this = $(this);
        $this.attr('data-icon','info');
        $this.children().children().removeClass('ui-icon-gear').addClass('ui-icon-info');                
    });
    $('#list').listview('refresh',true);
    return false; 
});

【讨论】：

我害怕那个。那好吧。我想知道哪些属性不需要这些额外的代码