Bootstrap CSS 不适用于使用 JQuery 动态添加的新 HTML答案

【问题标题】：Bootstrap CSS does not apply to new dynamically added HTML using JQueryBootstrap CSS 不适用于使用 JQuery 动态添加的新 HTML
【发布时间】：2012-10-05 21:44:52
【问题描述】：

我正在使用 Bootstrap 来设置我的网页样式，它几乎可以完美运行，但是当我尝试使用 $.append() 向页面添加新的 html 时。那么新的 html 不会获得默认的引导样式。这是我的相关 html：

 <div id="lines">
        <div id="line1">
            <input type="tel" class="Numbers" id="Number1" />
            <input type="tel" class="Numbers" id="Number2" />
            <input type="tel" class="Numbers" id="Number3" />
            <input type="tel" class="Numbers" id="Number4" />
            <input type="tel" class="Numbers" id="Number5" />
            <input type="tel" class="Numbers" id="Number6" />
            <input type="tel" class="Numbers" id="StrongNumber1" style="background-color:cyan"/>
            <button class="btn btn-primary addbtns" id="btnAdd1" onclick="addLine()">+</button>
            <button class="btn btn-primary addbtns" id="btnMinus1" disabled="disabled">-</button>
        </div>
    </div>

这是我的 JQuery：

function addLine() {
$('#btnAdd' + lineCounter).attr('disabled', 'true');
$('#btnMinus' + lineCounter).attr('disabled', 'true');

++lineCounter;

var line = "<div id='line" + lineCounter + "'>" +
                "<input type='tel' class='Numbers' id='Number" + lineCounter + "' />" +
                "<input type='tel' class='Numbers' id='Number" + lineCounter + "' />" +
                "<input type='tel' class='Numbers' id='Number" + lineCounter + "' />" +
                "<input type='tel' class='Numbers' id='Number" + lineCounter + "' />" +
                "<input type='tel' class='Numbers' id='Number" + lineCounter + "' />" +
                "<input type='tel' class='Numbers' id='Number" + lineCounter + "' />" +
                "<input type='tel' class='Numbers StrongNumber' id='StrongNumber" + lineCounter + "' style='background-color:cyan' />" +
                "<button class='btn btn-primary addbtns' id='btnAdd" + lineCounter + "' onclick='addLine()'>+</button>" +
                "<button class='btn btn-primary addbtns' id='btnMinus" + lineCounter + "' onclick='removeLine()'>-</button>" +
            "</div>";
$('#lines').append(line).fadeIn('slow');
}

编辑：好的，我尝试使用最简单的页面和一个简单的附加来重现该错误。还像@Sherbrow 建议的那样将 JS ' 切换为 " ，但它仍然无法正常工作..

这是我的 HTML：

<html xmlns="http://www.w3.org/1999/xhtml">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="test.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="test.js"></script>
<head></head>
<body dir="rtl">
<div id="lines">
        <div id="line1">
            <input type="tel" class="Numbers" id="Number1" />
            <input type="tel" class="Numbers" id="Number2" />
            <input type="tel" class="Numbers" id="Number3" />
            <input type="tel" class="Numbers" id="Number4" />
            <input type="tel" class="Numbers" id="Number5" />
            <input type="tel" class="Numbers" id="Number6" />
            <input type="tel" class="Numbers" id="StrongNumber1" style="background-color:cyan"/>
            <button class="btn btn-primary addbtns" id="btnAdd1" onclick="addLine()">+</button>
            <button class="btn btn-primary addbtns" id="btnMinus1" disabled="disabled">-</button>
        </div>
    </div>
</body>
</html>

我的 CSS：

body
{
    background-color:#E46C0B;
    text-align:center;
}
.Numbers
{
    width: 16px;
}

我的 JavaScript：

var lineCounter=1;
function addLine() {
$('#btnAdd' + lineCounter).attr('disabled', 'true');
$('#btnMinus' + lineCounter).attr('disabled', 'true');

++lineCounter;

var line = '<div id="line' + lineCounter + '">' +
                '<input type="tel" class="Numbers" id="Number' + lineCounter + '1" />'   +
                '<input type="tel" class="Numbers" id="Number' + lineCounter + '2" />' +
                '<input type="tel" class="Numbers" id="Number' + lineCounter + '3" />' +
                '<input type="tel" class="Numbers" id="Number' + lineCounter + '4" />' +
                '<input type="tel" class="Numbers" id="Number' + lineCounter + '5" />' +
                '<input type="tel" class="Numbers" id="Number' + lineCounter + '6" />' +
                '<input type="tel" class="Numbers StrongNumber" id="StrongNumber"' +  lineCounter + '" style="background-color:cyan" />' +
                '<button class="btn btn-primary addbtns" id="btnAdd"' + lineCounter + '" onclick="addLine()">+</button>' +
                '<button class="btn btn-primary addbtns" id="btnMinus"' + lineCounter + '" onclick="removeLine()">-</button>' +
            '</div>';
$('#lines').append(line);
}

我做错了什么？

感谢您的回答:)

【问题讨论】：

你的 HTML 页面应该有唯一的 id ??在这种情况下，这可能不是问题。但请确保您拥有独一无二的
Working here.
@SheikhHeera.. 检查这个.. type="tel" id='Number" + lineCounter.. 6 每个输入具有相同的 id
@Sushanth--，是的，我明白了，这就是为什么我赞成你的评论。
糟糕，谢谢。但这并不能解决问题:(

标签： jquery html css twitter-bootstrap

【解决方案1】：

CSS 不应该应用于新创建的 DOM 元素。然而，这可能发生在 JavaScript 中。

无论是否真的解决了问题，您的代码都有一些地方需要改变：

ID 只能使用一次。类可以重用。请将您的 line 和 lines ID 更改为类，以便您可以创建多个元素并在一个保护伞下为它们设置样式。
不要担心 " 或 '。只要 "s close "s 和 'close 's，JavaScript 都可以正常工作。
我注意到您正在设置输入框宽度的样式。确保尚未指定 min-width。

如果这些建议不起作用，请创建JSFiddle，以便我们重现问题。

【讨论】：