logo标签列表

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

jqueryhtmlcsstwitter-bootstrap
8

我使用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');
}

编辑： 好的，我尝试用最简单的页面和一个简单的附加操作来重现此错误，也像@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);
}

我做错了什么？

感谢回答 :)

2
你的HTML页面应该有唯一的ID，这在这种情况下可能不是问题。但请确保您拥有唯一的ID。 - Sushanth --
在这里工作：http://jsbin.com/uconof/1/edit。 - The Alpha
@SheikhHeera，请看这个.. type="tel" id='Number" + lineCounter'.. 6个输入框具有相同的ID。 - Sushanth --
抱歉，谢谢你。但这并没有解决问题 :( - DanelWolloch
你解决了这个问题吗，Danel？ - Matthew Moisen
显示剩余4条评论
1个回答
2

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

您的代码应该有一些需要更改的地方，无论它是否真正解决了问题：

  • ID只能使用一次。类可以重复使用。请将您的line和lines ID更改为类，以便您可以创建多个元素并在一个统一的样式下进行样式设置。
  • 不要过分关注“或'。只要"s close "s和's close 's，JavaScript就可以正常工作。
  • 我注意到您正在设置输入框的宽度。确保没有已经指定的min-width。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接