Question

我正在使用Bootstrap来设置我的网页样式，它几乎完美无缺，但是当我尝试使用$ .append（）向页面添加新的html时。那么新的html没有得到默认的bootstrap样式。这是我的相关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');
}

编辑：好吧，我试图用最简单的页面和简单的追加重现错误。还将JS'改为像@Sherbrow建议的那样，它仍然没有工作..

这是我的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);
}

我做错了什么？

感谢您的回答：）

Answer 1

不应该是CSS不适用于新创建的DOM元素。但是，这可能发生在JavaScript上。

您的代码中应该有一些变化，无论它是否真正解决了问题：

ID只能使用一次。类可以重用。请将您的line和lines ID更改为类，这样您就可以创建多个元素，并将它们全部置于一个伞下。
不要冒出“或”。只要“关闭”和“关闭”，JavaScript都可以正常工作。
我注意到你正在设计输入框的宽度。确保尚未指定min-width。

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

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

1 个答案: