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

回答1:

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.

回答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/

来源：https://stackoverflow.com/questions/20170339/how-to-make-sure-that-dynamic-dom-elements-have-correct-css-using-jquery-mobile