Question

剥离代码显示我可以更改属性，在本例中为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>

Answer 1

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

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

JS

$('#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; 
});

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

1 个答案: