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

Refresh a section after adding HTML dynamically to jquery mobile

本文关键字：一个 刷新 mobile jquery 动态 HTML 添加      更新时间：2023-09-26

可能重复：
动态添加可折叠元素

我看过一些关于这方面的帖子，但似乎没有一篇真的适用，或者我可能只是读错了。我有一些HTML是从服务器提供给我的，我真的无法更改。我想做的是，获取HTML，将其插入div元素&让jQuery mobile在上面做它的造型。我可能需要多次这样做，这就是痛苦发生的地方。

当我第一次插入它时，一切都很好，jqm接受了加法&风格完美。如果我第二次尝试，jqm根本不会接受。我试着制作一个"模板"，我复制和修改或只是插入静态的html&两者都不起作用。

我在下面有一个测试用例，正如你所看到的，点击一次添加新列表，它很好，再次点击它&您将得到一个无样式的选择。我在某个地方读到，使用实时事件可能有效，但在这种情况下也不起作用。

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

测试：

<!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中修复的一些想法。

更新

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

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

这是不赞成的：

使用CCD_ 2函数。

我建议：

  1. 清空您填充的div
  2. 在内部创建一个新的div
  3. 填充新div
  4. 在该新div上调用.page()

我与这个问题斗争了几个小时，但什么都不起作用。我有级联选择菜单，当在另一个菜单中选择一个选项时，这些菜单是通过ajax调用填充的。DOM正在更新，但是jQM拒绝识别新添加的选项。

最终起作用的是：

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

我使用的是JQM 1.0 RC2。

相关文章：