Styling Dynamically Added Content
So I've looked online in this issue, but can't seem to find the answer. Let me explain my problem fully.
I'm trying to dynamically add content to an <ul> and have it all formatted correctly. What I'm inserting to is this:
- <ul data-role="listview" id="localStoresUL" data-autodividers="true" data-divider-theme="d">
-
- </ul>
I have a list item somewhere else that is clicked and loads this up with data, and I am doing that with the following code:
- $("#localStores").click(function() {
- Customer.getLocalStores(13, 12, function(stores){
- for(var i = 0; i < stores.length; i++){
- $("#localStoresUL").append('<li class="store" id="' + stores[i].id + '"><a data-transition="slide" data-filter="false">' + stores[i].fullname + '</a></li>');
- }
- });
- });
Now this works all fine and dandy the first time the user clicks the link and it populates that <ul>. But I have a back button on the page using this code:
- <a href="#" class="ui-btn-left back" data-rel="back" data-icon="back" data-add-back-btn="true" >Back</a>
And when the user clicks this back button and then clicks on the previous <li> again (which should populate the <ul>) the content is loaded dynamically, but not formatted at all. I have no idea why this is happening. Does this problem make sense, and does anybody have any tips for how to fix it?