在$(document).ready(function(){})中动态地向DOM添加元素;添加元素但它们不可见。为什么?

时间:2013-08-14 15:10:52

标签: javascript jquery jquery-mobile dom dom-manipulation

我在$(document).ready(function(){})中添加了两个可折叠的jquery-mobile;

看起来像这样

$(document).ready(function() {
     var l_freeCollabsible=fCreateCollapsible("Free", "Free Content");
     var l_bestSellCollabsible=fCreateCollapsible("Best Sellers", "Best Selling Content");

     var l_frag = document.createDocumentFragment();

     l_frag.appendChild(l_freeCollabsible);
     l_frag.appendChild(l_bestSellCollabsible);

     document.body.appendChild(l_frag);
});

fCreateCollapsible()看起来像这样

 function fCreateCollapsible(heading,content){
    var l_collapsible = fDomCrElemTypeTheme("div","collapsible","b","b");
    l_collapsible.setAttribute("data-iconpos","right");
    var l_heading = fDomCrElemText("h4",heading);
    var l_content = fDomCrElemText("span",content);

    apc(l_collapsible,l_heading);
    apc(l_collapsible,l_content);

    return l_collapsible;
 }

此函数创建以下结构

<div data-role="collapsible" data-theme="b" data-content-theme="b" data-iconpos="right">
   <h4>Heading</h4>
    <span>
       Content
   </span>
</div>

我的问题是,在调用Dom ready之后,元素按我的意愿创建,但它们是隐藏的。

我尝试创建一个函数,将元素创建代码放入其中并从正文内部调用函数。它完美地运作。

有没有办法在ready函数中应用jquery样式?我想用一对空体标签动态创建所有元素。我正在尝试使用jqm + phonegap创建一个简单的移动应用程序

我正在使用jquery-mobile-1.3.2和jquery-1.9.1。

0 个答案:

没有答案