jquery - apply loaded CSS to dynamically created HTML -



jquery - apply loaded CSS to dynamically created HTML -

i'm adding html content dynamically using code on jquery mobile listview :

this code beingness loaded in index.html file withing #page container

<meta charset="utf-8"> <link rel="stylesheet" href="css/pages/notifications-list-view.css"> <div id="notifications-wrapper"> <div class="notifications-content"> <div data-role="navbar" id="navbar" class="notifications-categories"> <ul> <li> <a href="#" id="unread-notifications"> <span class="title">unread notifications</span> <i class="fa fa-circle fa-fw"></i> <span class="count">4</span> </a> </li> <li> <a href="#" id="all-notifications" style="height: 60px; line-height: 60px; ">all notifications</a> </li> </ul> </div> <ul data-role="listview" class="notifications-list" data-inset="true"> </ul> </div> </div> <script src="js/pages/notifications-list-view.js"></script>

in notifications-list-view.js have code :

$("#unread-notifications").addclass ($.mobile.activebtnclass); filllist (4) $("#unread-notifications").on ("click", function () { filllist (4); }); $("#all-notifications").on ("click", function () { filllist (10); }); function filllist (count) { var listitemclass = "listitem"; var content = ""; if (!$(this).hasclass ($.mobile.activebtnclass)) { (i = 0; < count; ++) { content += '<li id=' + listitemclass + '>'; content += '<div class="delete-button"><a href="#" class="ui-btn delete-btn">delete</a></div>'; content += '<a href="#" class="notification-item-a">'; content += '<div class="ui-li-thumb"></div>'; content += '<div class="ui-li-text">'; content += '<h3>credit elligibility</h3>'; content += '<p class="notification-core">'; content += 'we have recievede uhdccd uhc cdyucd cduhcd ucdhcd cduhcd ucdcd ucd cuhcd ucdcd ucdbcd ubc ahlan how doing it\'s not good'; content += 'we have recievede uhdccd uhc cdyucd cduhcd ucdhcd cduhcd ucdcd ucd cuhcd ucdcd ucdbcd ubc ahlan how doing it\'s not good'; content += 'we have recievede uhdccd uhc cdyucd cduhcd ucdhcd cduhcd ucdcd ucd cuhcd ucdcd ucdbcd ubc ahlan how doing it\'s not good'; content += 'we have recievede uhdccd uhc cdyucd cduhcd ucdhcd cduhcd ucdcd ucd cuhcd ucdcd ucdbcd ubc ahlan how doing it\'s not good'; content += 'we have recievede uhdccd uhc cdyucd cduhcd ucdhcd cduhcd ucdcd ucd cuhcd ucdcd ucdbcd ubc ahlan how doing it\'s not good'; content += '</p>'; content += '</div>'; content += '</a>'; content += '</li>'; listitemclass = "listitem" + i; } $(".notifications-list").html (content); $(".notifications-list").trigger ("chosen:updated"); } }

however css / js loaded not applied.

how can create css style , js code applied dynamically added html content ?

thank you.

jqm doesn't apply styles (enhance) dynamically added elements, enhancement method should called based on widget used.

the problem you're calling filllist() before page initialized, maybe you're using .ready(). should hear jqm pagecontainer events run functions.

also, have understand jqm starts enhancing widgets during pagebeforecreate event; when enhancement done, pagecreate event fired. if add together elements dynamically during pagebeforecreate don't need phone call enhancement method, however, on pagecreate need manually enhance dynamic elements, e.g. .listview("refresh").

in filllist() need $(".notifications-list").html(content); when it's called during pagebeforecreate.

$(document).on("pagebeforecreate", "#pageid", function () { filllist(20); });

in filllist() need add together enhancement $(".notifications-list").html(content).listview("refresh").

$(document).on("pagecreate", "#pageid", function () { filllist(20); });

when want phone call filllist() after page created , shown, need determine whether listview nowadays in dom , created.

fresh/new listview: utilize .listview() create after appending dynamically existed listview: utilize .listview("refresh") apply styles new elements

jquery css jquery-mobile

Comments

Post a Comment

Popular posts from this blog

c - Compilation of a code: unkown type name string -

c - Compilation of a code: unkown type name string - i have next lines of code compiler says following: "unknown type name 'string'" both in declaration , definition of function. can tell me what's wrong? thanks. #include <stdio.h> #include <stdlib.h> #include <string.h> void frecognizeclient(string *actualclient) there no string type in c. need utilize array so: char array[10]; then can pass in function: void frecognizeclient(char *actualclient); c arrays string compilation
Read more

java - Bypassing "final local variable defined in an enclosing type" -

java - Bypassing "final local variable defined in an enclosing type" - i'm writing programme , i'm getting "the final local variable asd cannot assigned, since it's defined in enclosing type". i provide illustration not code produces error aswell. have arraylist utilize later (if define within button can't utilize later on), outside of button, pressing button should give values arraylist. in illustration "create new arraylist" cause same problem. button btn = new button("asd"); final arraylist asd = new arraylist(); btn.setonaction(new eventhandler<actionevent>() { public void handle(final actionevent event) { asd = new arraylist(); //here's error.. } }); clear arraylist , add together values. java javafx
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more