How To Make Sure That Dynamic Dom Elements Have Correct Css Using Jquery Mobile

I am building a mobile app using jQuery mobile. I try to add some inputs dynamically, however, jQuery mobile style is not added to dynamically created input. I have created a sim

Solution 1:

Try .trigger("create")

 $('#pageone').append("<inputclass='laskaInput'type='email'name='email'placeholder='1@1.com'>")
            .trigger("create");

---

you are appending elements with same ID many times .ID must be unique use class instead

Read Two HTML elements with same id attribute: How bad is it really?

fiddle Demo

---

jQuery mobile adds its own styles and classes at Page load.The element which are added later need to .trigger("create"); so that jQuery mobile adds styles and classes to new elements added .

---

Note:- It is important to remember that create must be triggered on the parent container and not on the individual element that needs to be enhanced.

Read Triggering create on injected HTML does not work.

Solution 2:

because you haven't included a class

here you go:

$(document).ready(function () {
    $('body').click(function () {
        $('#pageone').append("<input id='lskaInput' type='email'  name='email' placeholder='1@1.com' class='ui-input-text ui-body-c ui-corner-all ui-shadow-inset'>");
    });
});

http://jsfiddle.net/jGhqS/2/