jquery样式不适用于动态创建答案

【问题标题】：jquery styles not applied in dynamically creationjquery样式不适用于动态创建
【发布时间】：2012-10-22 21:55:09
【问题描述】：

我在 jquery mobile 中创建了可折叠的列表视图。它是动态的。如果我在 html 代码中创建了可折叠，它显示得很好。我动态尝试的同一个，然后不应用样式。

Html 页面中的代码：

<div data-role="collapsible">
                    <h2>Bucks County<br>BU</h2>
                    <ul data-role="listview">
                        <li><a href="index.html">Location </a></li>
                    </ul>
            </div>

Jquery 中的代码：

$("#lsititems").append('<div data-role="collapsible">'+
                    '<h2>'+data[0].SiteName+'<br>'+data[0].SiteCode+'</h2>'+
                    '<ul data-role="listview">'+
                    '<li>'+'<a href="index.html">'+'Location'+'</a>'+'</li>'+
                    '</ul>'+
                    '</div>')

我也试过这个：

$("#lsititems").append("<div data-role='collapsible'>"+
                                "<h2>"+data[1].SiteName+"<br>"+data[1].SiteCode +"</h2>"+
                                "<ul data-role='listview'>"+
                                "<li>"+"<a href='index.html'>"+"Location"+"</a>"+"</li>"+
                                "</ul>"+
                                "</div>")

O/P：

从上面的代码中，第一个是从 Html 创建的，第二个和第三个是在 jquery 中动态创建的。我的代码有什么问题..请帮助我.. 提前谢谢...

【问题讨论】：

你的意思是什么风格？ divs、h2 和列表的 CSS？
Jquery 角色，如 data-role ="collapsible" 不适用于动态创建。
当然，它们只是数据属性。您如何期望任何代码能够捕捉到他们的创作？您必须明确应用它
谢谢您，有任何示例或链接可以关注吗？
Dynamically adding collapsible elements 的可能副本。这个问题被问了很多。一般而言，在发布此类问题之前，请在网站上搜索可以提供帮助的问题/答案。例如，当您输入问题的标题时，SO 试图给您类似的现有问题，其中一些问题将帮助您解决问题。

标签： javascript listview jquery-mobile

【解决方案1】：

对于动态添加的内容，您需要调用.collapsible() 方法：

$('div[data-role=collapsible]').collapsible();

【讨论】：

【解决方案2】：

在 jQuery mobile 中，当您动态添加内容时，您需要初始化内容，或者如果您正在添加内容（例如向列表视图添加项目），则需要刷新内容。

如果您有多个项目需要初始化，您只需将页面上的create event 触发到initialize 所有这些项目。通常最好在pageshow 事件中这样做。

例如

$("#mypage").on('pageshow', function () {
   $(this).trigger("create");
});

【讨论】：

这可以创建一个竞争条件，其中pageshow 事件可能在动态内容实际添加到 DOM 之前触发。在元素被添加到 DOM 之后运行 .trigger('create') 代码会好得多。
是的，除了我发现有时 JQM 不能正确地增强内容，除非在 pageshow event 中调用它。我很早以前就遇到过这个问题（不记得是哪个版本的 JQM，可能是 1.0 或更早版本），所以这可能不再是问题了。