css Will Not Apply After Dynamically Adding Div Split

advertisements

Ok I've tried enhancewithin, trigger('create'), .page(), trigger('enhance') but after inserting a div within another div, the css won't apply. It will add the controls but the css won't apply.

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

The inserted div is also within a collapsible fieldset. Not sure that this makes a difference but here is the format.

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

I am also using jQuery mobile for this app. Thanks so much for your help:-)

The function that adds the div is the addOtherItem function. It passes in the id of the div that needs to be created and the addOther is the name of the div where I want the new div to be inserted after.

The css sheets are referenced in the page and is applied correctly on the exact same divs. I include the css in html generated in the addOtherItem function.


It works fine without .trigger() in this fiddle. Note the background color is set to blue in .a{}, and green in the inline style. Here's the function and a .click() handler on the "Add" button:

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++
});

If this still doesn't work for you, then try confirming that you still have the issue on a later version of jQuery mobile and also on a different browser.