बूटस्ट्रैप सीएसएस JQuery

का उपयोग कर नए गतिशील रूप से जोड़े गए HTML पर लागू नहीं होता है। मैं अपने वेबपृष्ठ को स्टाइल करने के लिए बूटस्ट्रैप का उपयोग कर रहा हूं और यह लगभग सही, काम करता है लेकिन जब मैं $ .append का उपयोग कर पृष्ठ पर नया HTML जोड़ने की कोशिश कर रहा हूं()। तो नया एचटीएमएल डिफ़ॉल्ट बूटस्ट्रैप शैली नहीं मिलता है। यह मेरा प्रासंगिक एचटीएमएल है:बूटस्ट्रैप सीएसएस 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>

और ये मेरे 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 तरह का सुझाव दिया है, और यह अभी भी काम नहीं कर रहा ..

यहाँ मेरी 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>

मेरी सीएसएस:

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

मेरी जावास्क्रिप्ट:

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

मैं क्या गलत कर रहा हूं?

उत्तर के लिए धन्यवाद :)

स्रोत

2012-10-04 DanelWolloch

आपका HTML पृष्ठ विशिष्ट आईडी के होना चाहिए ?? यह एक मुद्दा नहीं हो सकता है इस मामले में .. लेकिन सुनिश्चित करें कि आपके पास अद्वितीय –

है [यहां काम कर रहा है] (http://jsbin.com/uconof/1/edit) –

@ शेखहेरा .. यह जांचें। टाइप = "टेल" आईडी = 'नंबर "+ लाइन काउंटर .. 6 एक ही आईडी –

ऐसा नहीं होना चाहिए कि सीएसएस नए बनाए गए डीओएम तत्वों पर लागू नहीं होगा। यह जावास्क्रिप्ट के लिए हालांकि हो सकता है।

चाहे वह वास्तव में समस्या ठीक होती है या नहीं कुछ चीजें हैं जो अपने कोड में परिवर्तन करना चाहिए नहीं है,:

आईडी केवल एक बार इस्तेमाल किया जा के लिए होती हैं। कक्षाओं का पुन: उपयोग किया जा सकता है। कृपया कक्षाओं में अपने line और lines आईडी बदलें ताकि आप कई तत्व बना सकें और उन्हें एक छतरी के नीचे शैली बना सकें।
"या" पसीना न पड़े। जावास्क्रिप्ट दोनों के साथ "ठीक है" और 0 के करीब दोनों के साथ ठीक काम करेगा।
मैंने देखा कि आप इनपुट बॉक्स की चौड़ाई को स्टाइल कर रहे हैं। पहले से ही एक min-width निर्दिष्ट किया जाता है नहीं।

इन सुझावों को काम नहीं करते हैं, तो बनाएं एक JSFiddle तो हम समस्या को पुन: कर सकते हैं।

स्रोत

2012-10-05 13:44:52

बूटस्ट्रैप सीएसएस JQuery

उत्तर

संबंधित मुद्दे