Menu
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 :)
213
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:
line and lines IDs to classes so you can create multiple elements and style them all under one umbrella.min-width specified.If these suggestions don't work, please create a JSFiddle so we can reproduce the problem.
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
