Question

我试图在JavaScript中生成一个简单的jQuery代码片段，并将其附加到我的html文件中已有的div之一。这是我试图作为html文件中现有div元素的html内容追加的字符串：

<form><div id=\"radio\"><input type=\"radio\" id=\"radio1\" name=\"radio\" /><label 
for=\"radio1\">Choice 1</label><input type=\"radio\" id=\"radio2\" name=\"radio\" /><label 
for=\"radio2\">Choice 2</label><input type=\"radio\" id=\"radio3\" name=\"radio\" /><label 
for=\"radio3\">Choice 3</label></div></form>

如果您在JSFiddle上尝试以下代码：

$('div#new').append('<form><div id=\"radio\"><input type=\"radio\" id=\"radio1\" name=\"radio\" /><label 
for=\"radio1\">Choice 1</label><input type=\"radio\" id=\"radio2\" name=\"radio\" /><label 
for=\"radio2\">Choice 2</label><input type=\"radio\" id=\"radio3\" name=\"radio\" /><label 
for=\"radio3\">Choice 3</label></div></form>')

显示Radio元素但没有jQuery视觉样式。在静态html文件中尝试相同的字符串时（见下文），视觉样式正确显示。非常感谢您的帮助。

PS：我试图避免使用jquery \ html \ JS模板，所以我会很好地使用这些代码而不需要模板。

谢谢，贾米尔

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

<body>
    <form>
        <div id="radio">
            <input type="radio" id="radio1" name="radio" />
            <label for="radio1">Choice 1</label>

            <input type="radio" id="radio2" name="radio" />
            <label for="radio2">Choice 2</label>

            <input type="radio" id="radio3" name="radio" />
            <label for="radio3">Choice 3</label>
        </div>
    </form>
</body>
</html>

Answer 1

似乎工作得很好......

http://jsfiddle.net/E2zTn/10/

我所做的只是添加

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

<body>

....

</body>
</html>

Answer 2

我不确定我是否完全从您的代码中了解了您尝试做的事情，因为它并不完全符合您的描述，但您尝试过类似的事情：

$("#radio").append('<input type="radio" id="radio1" name="radio" /><label 
for="radio1">Choice 1</label><input type="radio" id="radio2" name="radio" /><label 
for="radio2">Choice 2</label><input type="radio" id="radio3" name="radio" /><label 
for="radio3">Choice 3</label>');

不同之处在于，不是在#radio之外添加内容，而是在内部添加内容。这有帮助吗？

谢谢！尼尔

Answer 3

元素上的

.trigger（'create'）将强制元素重新渲染，再次拾取所有必需的样式。

如何生成jQuery代码段

3 个答案: