8

Web ページのスタイルを設定するために Bootstrap を使用していますが、ほぼ完璧に動作しますが、$.append() を使用してページに新しい html を追加しようとすると、その場合、新しい html はデフォルトのブートストラップ スタイルを取得しません。これは私の関連する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>

そして、これは私の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が提案したように、JS ' を " に切り替えましたが、まだ機能していません..

ここに私の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>

私のCSS：

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

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

私は何を間違っていますか？

答えてくれてありがとう:)

4

1 に答える 1

2

新しく作成された DOM 要素に CSS が適用されないということはあってはなりません。ただし、これは JavaScript で発生する可能性があります。

実際に問題が修正されるかどうかにかかわらず、コードを変更する必要があることがいくつかあります。

  • ID は 1 回だけ使用することを意図しています。クラスは再利用できます。ID をクラスに変更してline、lines複数の要素を作成し、それらすべてを 1 つの傘の下でスタイルできるようにしてください。
  • " または ' を心配しないでください。JavaScript は、"s close " と 's close の両方で問題なく動作します。
  • 入力ボックスの幅をスタイリングしていることに気付きました。まだmin-width指定されていないことを確認してください。

これらの提案が機能しない場合は、問題を再現できるようにJSFiddleを作成してください。

于 2012-10-05T13:44:52.843 に答える