Geek Answers Handbook

Bootstrap CSS does not apply to newly dynamically added HTML using jQuery

I use Bootstrap to style my webpage and it works almost perfectly, but when I try to add new html to the page using $ .append (). then the new html will not get the bootstrap style. this is my corresponding 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: Well, I tried to reproduce the error with the simplest page and simple addition. also switched JS "to" as @Sherbrow suggested, and it still doesn't work.

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 answers:)

+8
jquery html5 css3 twitter-bootstrap
source share
1 answer

CSS should not be applied to newly created DOM elements. This can happen, however, for JavaScript.

There are several things that should change in your code, whether it fixes the problem or not:

  • Identifiers are intended only once. Classes can be reused. Change your line and line identifiers to classes so that you can create multiple elements and style them under one umbrella.
  • Do not sweat or. JavaScript will work fine with both until they close and close.
  • I noticed that you are adjusting the width of the input fields. Make sure min-width is not yet specified.

If these suggestions do not work, create a JSFiddle so that we can reproduce the problem.

+2
source share

More articles:


All Articles