Jquery Mobile - 动态创建listview弹出窗口

时间:2014-10-01 09:11:33

标签: listview jquery-mobile dynamic popup

我想使用Jquery Mobile在弹出窗口中动态显示列表视图。当我在listview中编写我想要的HTML代码时,它会以良好的css样式显示出来。但是当我使用Javascript生成listview内容时,css样式会被破坏,我不明白为什么。

这是我的问题的JSFiddle,左边是我想要获取的菜单,右边是我实际获得的菜单:http://jsfiddle.net/c0enm7yo/

HTML代码:

<body>
    <div data-role="page" data-theme="c" id="projets">
        <div data-role="content" id="content">

            <div data-role="popup" id="menuIWant" data-theme="c" data-position-to="window" data-transition="slide">
                <ul data-role='listview' data-inset='true' data-icon='delete' style='min-width:210px;' id="menuIWantDivider">
                    <li data-role='list-divider'>Menu I Want</li>
                    <li><a href='#'>View details</a></li>
                    <li><a href='#'>Edit</a></li>
                    <li><a href='#'>Disable</a></li>
                    <li><a href='#'>Delete</a></li>
                </ul>
            </div>

            <div data-role="popup" id="menuIGet" data-theme="c" data-position-to="window" data-transition="slide">
                <ul data-role='listview' data-inset='true' data-icon='delete' style='min-width:210px;' id="menuIGetDivider">
                    <li data-role='list-divider'>Menu I Get</li>
                </ul>
            </div>
        </div>

        <div data-role="footer" data-position="fixed" data-theme="f" data-tap-toggle="false" id="footer">
            <a href="#menuIWant" data-role="button" data-rel="popup" data-theme="c" id="menuIWantButton">Menu I want</a>  

            <a href="#menuIGet" data-role="button" data-rel="popup" data-theme="c" id="menuIGetButton">Menu I get</a>
        </div>
    </div>
</body>

Javascript代码:

$(document).on('click', '#menuIGetButton', function(event)
{
    createDeleteProjectPopup();    
});

function createDeleteProjectPopup()
{
    $('<li>').append("<a href='#'>View details</a>").appendTo('#menuIGetDivider');
    $('<li>').append("<a href='#'>Edit</a>").appendTo('#menuIGetDivider');
    $('<li>').append("<a href='#'>Disable</a>").appendTo('#menuIGetDivider');
    $('<li>').append("<a href='#'>Delete</a>").appendTo('#menuIGetDivider');
}

0 个答案:

没有答案