0

次のコードを動的に挿入するときに、ページを強制的に更新して、jQuery モバイル フォーマットを適用することができます。
何らかの理由で、ボタンの書式設定を設定できません。リストを動的に挿入してボタンを挿入できるため、本当に奇妙ですが、名前以外のボタンをフォーマットすることはできません。
CSSで操作できますが、jQuery APIを使いたいです。

$('#cartList').append('<li>'
    + '<h3>' + game.Title+'</h3>'
    + '<p>' + '£' + game.Price + '</p>' 
    + '<a href="#cartList" data-role="button" data-icon="none" data-inline="true" onclick="removeItem()">Remove</a>'
    + '<h3 class="ui-li-aside">' + game.Format + '</h3>'
    + '</li>').trigger("create");
4

1 に答える 1

1

jQuery Mobile Docには、新しいリスト アイテムがリストに追加された場合、またはリストから削除された場合、仕切りは自動的に更新されず、リストビューで refresh() を呼び出して自動仕切りを再描画する必要があることが記載されています。

リストにデータを入力した後、次を追加してみてください$('#cartList').listview('refresh');。

例： 

<!doctype html>
<html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>   

         <script>
            $(document).ready(function(){
                $("#add-li-button").click(function(){ 
                    $('#listList').append("<li data-role=\"collapsible\"> <h3>New List</h3> <div data-role=\"fieldcontain\"></div> </li>").listview("refresh");
                });
            });
        </script>   
   </head>
   <body>
        <div data-role="page" id="page">
            <ul id="listList" data-role="listview">
            </ul>
            <input type="button" id="add-li-button" value="add a checkbox to list1" />
        </div>    
    </body>
</html>
于 2012-08-28T20:43:31.293 に答える