css 在动态添加嵌套 div 后将不适用

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 手机上使用此应用。非常感谢您的帮助:-)

添加div的函数是addOtherItem函数。它传入需要创建的 div 的 id，而 addOther 是 div 的名称，我希望在其中插入新的 div。

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

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{} 中设置为蓝色，在内联样式中设置为绿色。这是 "Add" 按钮上的函数和 .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 移动设备和其他浏览器上仍然存在该问题。

css 在动态添加嵌套 div 后将不适用

css won't apply after dynamically adding nested div

html

javascript

jquery

jquery-mobile