Bootstrap CSS no se aplica al nuevo HTML agregado dinámicamente utilizando JQuery

Estoy usando Bootstrap para diseñar mi página web y funciona casi perfecto, pero cuando intento agregar un nuevo html a la página usando $ .append(). entonces el nuevo html no obtiene el estilo predeterminado de arranque. esta es mi html relevante:Bootstrap CSS no se aplica al nuevo HTML agregado dinámicamente utilizando JQuery

<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>

Y esta es mi 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'); 
}

edición: Ok i trató de reproducir el error con la página más simple posible y un append sencilla. También cambió la JS "a" como @Sherbrow sugirió, y sigue sin funcionar ..

aquí es mi 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>

mi CSS:

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

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

¿Qué estoy haciendo mal?

Gracias por las respuestas :)

Fuente

2012-10-04 DanelWolloch

su página HTML debe tener una ID única de ?? Esto puede no ser un problema en este caso ... Pero asegúrese de tener el único –

[Trabajando aquí] (http://jsbin.com/uconof/1/edit). –

@SheikhHeera ... Compruebe esto. . type = "tel" id = "Number" + lineCounter .. 6 cada entrada con la misma identificación –

No debería ser el caso que el CSS no se aplicaría a los elementos DOM recientemente creados. Sin embargo, esto puede suceder con JavaScript.

Hay algunas cosas que se deben cambiar en el código, si realmente soluciona el problema o no:

identificaciones están destinados a ser utilizados una sola vez. Las clases pueden ser reutilizadas. Cambie sus ID de line y lines a las clases para que pueda crear varios elementos y diseñarlos en un mismo marco.
No te preocupes por el "o". JavaScript funcionará bien con ambos, siempre y cuando esté cerca y se cierre.
Me di cuenta de que estás diseñando el ancho de los cuadros de entrada. Asegúrate de que no hay ya una min-width especificado.

Si estas sugerencias no funcionan, por favor crear una JSFiddle por lo que puede reproducir el problema.

Fuente

2012-10-05 13:44:52

Bootstrap CSS no se aplica al nuevo HTML agregado dinámicamente utilizando JQuery

Respuesta

Cuestiones relacionadas