Bootstrap CSS does not apply to new dynamically added HTML using JQuery

Question

I'm using Bootstrap in order to style my webpage and it works almost perfect, but when i'm trying to add new html to the page using $.append(). then the new html does not get the default bootstrap style. this is my relevant 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>

And this is my 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');
}

edit: Ok i tried to reproduce the bug with the simplest page possible and a simple append. also switched the JS ' to " like @Sherbrow suggested, and it still not working..

here is my 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>

my CSS:

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

my 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);
}

What am I doing wrong?

Thanks for the answers :)

Your HTML page should have unique id's ?? That might not be a issue in this case.. But make sure you have unique — Sushanth --
– Sushanth --, Commented Oct 4, 2012 at 20:05
@SheikhHeera.. Check this.. type="tel" id='Number" + lineCounter.. 6 each input with same id — Sushanth --
– Sushanth --, Commented Oct 4, 2012 at 20:06
@Sushanth--, Yes I got it, that's why I've upvoted your comment. — The Alpha
– The Alpha, Commented Oct 4, 2012 at 20:10

Adam Grant · Accepted Answer · 2012-10-05 13:44:52Z

2

It shouldn't be the case that the CSS would not apply to newly created DOM elements. This can, however, happen for JavaScript.

There's a few things that should change in your code, whether it actually fixes the issue or not:

IDs are meant to be used only once. Classes can be reused. Please change your line and lines IDs to classes so you can create multiple elements and style them all under one umbrella.
Don't sweat the " or '. JavaScript will work fine with both as long as "s close "s and 's close 's.
I noticed you're styling the width of input boxes. Insure there is not already a min-width specified.

If these suggestions don't work, please create a JSFiddle so we can reproduce the problem.

answered Oct 5, 2012 at 13:44

Adam Grant

13.2k10 gold badges61 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap CSS does not apply to new dynamically added HTML using JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related