How to make sure that dynamic DOM elements have correct css using jQuery mobile

Question

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 simple app: http://jsfiddle.net/jGhqS/ I would like to have all my new inputs inherit default jQuery mobile css. How do I do it? And Why is it not working by default? Code to add input dynamically: ``` $('#pageone').append("<input id='laskaInput' type='email' name='email' placeholder='1@1.com'>"); ```

Accepted Answer

Try .trigger("create")

```
 $('#pageone').append("<input class='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.

How to make sure that dynamic DOM elements have correct css using jQuery mobile

Solution

Problem