Question

好的我已经尝试过enhancewithin，trigger（'create'）,. page（），trigger（'enhance'）但是在另一个div中插入div之后，css将不会应用。它将添加控件但css将不适用。

function addOtherItem(id, addOther) {
    var btn = "btn" + id;
    var txt = "txt" + id;
    var pg = '<div id="' + id + '" class="a" data-role="controlgroup" data-type="horizontal">'
    pg+='<input id="' + txt +'" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" id="serviceOther" placeholder="Enter Service Name" />'
    pg+='<button id="' + btn + '" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>'
    pg+='</div>'
    $(addOther).after(pg).trigger('create');   
}

插入的div也位于可折叠的字段集中。不确定这会有所不同，但这是格式。

<fieldset data-role="collapsible">
  <legend>Other</legend>
  <div id="collapse" data-role="controlgroup">
     <div id="addOther_1" class="a" data-role="controlgroup" data-type="horizontal">
       <input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
       <button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
    </div>
    <div id="addOther_2" class="a" data-role="controlgroup" data-type="horizontal">
       <input id="Text1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
       <button id="Button1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
    </div>
    <a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
  </div>
</fieldset>

我也在使用jQuery mobile这个应用程序。非常感谢你的帮助： - ）

添加div的函数是addOtherItem函数。它传递了需要创建的div的id，addOther是div的名称，我希望在之后插入新的div。

页面中引用了css表，并且它们在完全相同的div上正确应用。我在addOtherItem函数中生成的html中包含了css。

Answer 1

经过几个小时试图解决这个问题后，我应用了与jQM 1.4.2 Collapsible set not refreshing properly after dynamic content change

相似的内容

function addOtherItem(id, addOther) {
   var btn = "btn" + id;
   var txt = "txt" + id;
   var pg = '<div id="' + id + '" class="a" data-role="controlgroup" data-type="horizontal">'
   pg+='<input id="' + txt +'" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" id="serviceOther" placeholder="Enter Service Name" />'
   pg+='<button id="' + btn + '" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>'
   pg+='</div>'
   $(addOther).after(pg).trigger('create');
   $("#ServicePage #fieldsetCollapse").enhanceWithin();
}

似乎我需要刷新JQM页面的可折叠部分。

Answer 2

在this fiddle中没有.trigger（）的情况下工作正常。请注意，背景颜色在.a {}中设置为蓝色，在内联样式中设置为绿色。这是＆＃34; Add＆＃34;的功能和.click（）处理程序。按钮：

function addOtherItem(id, addOther) {
    var btn = "btn" + id;
    var txt = "txt" + id;
    var pg = '<div id="' + id + '" class="a" data-role="controlgroup" data-type="horizontal">'
    pg+='<input id="' + txt +'" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" id="serviceOther" placeholder="Enter Service Name" />'
    pg+='<button id="' + btn + '" style="background-color: green; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>'
    pg+='</div>'
    $(addOther).after(pg);
}
var inc = 1;
$('#btnaddOther').click(function(){
    addOtherItem('foo_'+inc, '#collapse')
    inc++
});

如果这仍然不适合您，请尝试确认您在更高版本的jQuery移动设备上以及其他浏览器上仍然存在此问题。

动态添加嵌套div后，css不会申请

2 个答案: