将 HTML 动态添加到 jquery mobile 后刷新部分 [英] Refresh a section after adding HTML dynamically to jquery mobile

查看：19 发布时间：2021/12/27 19:02:58 javascript jquery jquery-mobile

本文介绍了将 HTML 动态添加到 jquery mobile 后刷新部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

<块引用>

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

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

我在下面有一个测试用例，如您所见，单击添加新列表一次，就可以了，再次单击它&你会得到一个无样式的选择.我在某处读到使用实时事件可能会起作用，但在这种情况下也不起作用.

此外，我知道 jQuery mobile 中的选择列表 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"><头><title>列表插入测试</title><meta http-equiv="Pragma" content="no-cache"/><meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><!-- 包含 jQuery --><script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script><!-- 包括 jQuery Mobile 框架 --><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"/><身体><div data-role="page" data-theme="b" id="Dashboard"><button id='addlist'>添加新列表</button><button id='addips'>添加模板化列表</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></选择>

<div id="thelist">呸呸呸

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

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

更新 #2:显然现在已弃用，有关如何在 beta2 中修复的一些想法，请参见下文.

解决方案

更新

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

FAQ 更新:http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html

已弃用:

使用 .page() 函数.

我建议:

清空您填充的 div
在里面新建一个div
填充新的div
在那个新 div 上调用 .page()

Possible Duplicate:
Dynamically adding collapsible elements

I've seen a few posts on this but none of them really seem to apply, or I could just be reading it wrong. I've got some HTML that's fed to me from a server that I can't really get changed. What I want to do is, grab that HTML, insert it into a div element & have jQuery mobile do it's styling thing on it. I potentially need to do that multiple times, and that's where the pain happens.

When I insert it the 1st time, it's all fine, jqm picks up the addition & styles it perfectly. If I try a 2nd time, jqm doesn't pick it up at all. I've tried making a 'template' that I copy and modify or just inserting static html & neither work.

I've got a test case below, as you'll see, click add new list once, and it's fine, click it again & you get an unstyled select. I've read somewhere that using the live event may work, but that doesn't work in this case either.

Also, I know about the select list selectmenu method in jQuery mobile, but the item I get back could be single/multiple select lists, a bunch of radio buttons or even a set of free text fields. As you can see, I've also tried running the page method on the topmost element, I've also tried running page on the element I'm about to add, all to no avail. :(

Test:

<!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>

Update: Using naugur's answer below, the add new list function would look like...

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

Update #2: Apparently this is now deprecated, see below for some ideas on how to fix in beta2.

解决方案

update

As of jquery mobile beta2 you trigger an event - .trigger('create')

FAQ updated: http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html

This is deprecated:

use .page() function.

I suggest:

empty the div you populate
create a new div inside
populate the new div
call .page() on that new div

这篇关于将 HTML 动态添加到 jquery mobile 后刷新部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

将 HTML 动态添加到 jquery mobile 后刷新部分 [英] Refresh a section after adding HTML dynamically to jquery mobile

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

将 HTML 动态添加到 jquery mobile 后刷新部分 [英] Refresh a section after adding HTML dynamically to jquery mobile

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭