如何使用 jQuery mobile 确保动态 DOM 元素具有正确的 css答案

【问题标题】：How to make sure that dynamic DOM elements have correct css using jQuery mobile如何使用 jQuery mobile 确保动态 DOM 元素具有正确的 css
【发布时间】：2013-11-24 02:21:17
【问题描述】：

我正在使用 jQuery mobile 构建一个移动应用程序。我尝试动态添加一些输入，但是，jQuery 移动样式不会添加到动态创建的输入中。我创建了一个简单的应用程序：http://jsfiddle.net/jGhqS/

我希望我的所有新输入都继承默认的 jQuery 移动 CSS。我该怎么做？为什么它默认不工作？

动态添加输入的代码：

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

【问题讨论】：

您多次添加具有相同ID 的元素。ID 必须是唯一的，请改用class。

标签： javascript jquery html css jquery-mobile

【解决方案1】：

试试.trigger("create")

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

您要多次附加具有相同ID 的元素。ID 必须是唯一的，请改用class

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

fiddle Demo

jQuery mobile 在页面加载时添加自己的样式和类。稍后添加的元素需要.trigger("create");，以便 jQuery mobile 为添加的新元素添加样式和类。

注意：- 重要的是要记住创建必须在父容器而不是需要的单个元素得到增强。

阅读Triggering create on injected HTML does not work.

【讨论】：

@fasola81 欢迎乐于助人 :)
@TusharGupta 爱你 .trigger("create") :))

【解决方案2】：

因为你没有包含一个类

给你：

$(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/

【讨论】：