Question

可能重复：
Dynamically adding collapsible elements

我已经看到了一些这方面的帖子，但它们似乎都没有真正适用，或者我可能只是读错了。我有一些HTML从服务器提供给我，我真的无法改变。我想要做的是，抓住HTML，将其插入div元素＆amp;让jQuery mobile做它的造型事。我可能需要多次这样做，这就是痛苦发生的地方。

当我第一次插入它时，一切都很好，jqm选择了添加＆amp;完美的风格。如果我第二次尝试，jqm根本不会接受它。我已经尝试制作一个我复制和修改的“模板”，或者只是插入静态html＆amp;无法工作。

我在下面有一个测试用例，你会看到，点击一次添加新列表，就可以了，再点击一次＆amp;你得到一个没有风格的选择。我在某处读过使用直播活动可能会有效，但在这种情况下也不行。

另外，我知道jQuery mobile中的选择列表selectmenu方法，但我得到的项目可能是单个/多个选择列表，一堆单选按钮甚至是一组自由文本字段。正如你所看到的，我也尝试在最顶层的元素上运行页面方法，我也尝试在我即将添加的元素上运行页面，但都无济于事。：（

测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
    <title>List insert test</title> 
    <meta http-equiv="Pragma" content="no-cache" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <!-- include jQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
    <!-- include jQuery Mobile Framework -->
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.css" />
</head> 
<body>
    <div data-role="page" data-theme="b" id="Dashboard">

        <button id='addlist'>add new list</button>
        <button id='addips'>add templated list</button>
        <button id='clearall'>clear</button>
        <div id='theplace'></div>
        <div id='newtemp'>
            <select id='thelisttemplate'>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <div id="thelist">
            jkghjkgh
        </div>
    </div>
</body>

<script type="text/javascript">
    $('#addips').live('click', (function() {
        l = $('#thelisttemplate').clone()
        $('#thelist').html('')
        $('#thelist').append($(l))
        $('#thelist').page()

    }))

    $('#addlist').click(function() {
        l = $("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>")
        $('#thelist').html('')
        $('#thelist').append($(l))
        $('#thelist').page()

        //$('#theplace').after($("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>"))
        //$('#thelisttemplate').page()
    })

    $('#clearall').click(function() {
        $('#thelist').html('')
    })
</script>

</html>

更新：使用下面的naugur答案，添加新列表功能看起来像......

    $('#addlist').click(function() {
        l = $("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>")
        $('#thelist').html('<div data-role="collapsible-set" id="newstuff"></div>');
        $("#newstuff").html(l).page();            
    })

更新＃2：显然现已弃用，请参阅下文，了解有关如何修复beta2的一些想法。

Answer 1

<强>更新

从jquery mobile beta2开始，你会触发一个事件 - .trigger('create')

常见问题更新：http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html

不推荐使用：

使用.page()功能。

我建议：

清空您填充的div
在
填充新div
在新div上致电.page()

Answer 2

我挣扎了几个小时，没有任何工作。当在另一个菜单中选择了一个选项时，我有通过ajax调用填充的级联选择菜单。 DOM正在更新，但jQM拒绝识别新添加的选项。

最终起作用的（它基于预感 - 我没有发现它在任何地方都有记录）是：

$('#controlName').selectmenu('refresh');

我正在使用JQM 1.0 RC2。

在动态添加HTML到jquery mobile后刷新一个部分

2 个答案: