5

jQuery を使用して動的に新しい要素を追加します。しかし、新しく追加された要素には、CSS が適切に適用されていません。

私はjsFiddleで私の問題を実証しました。新しく追加された入力テキスト ボックスの間隔が異なります。

HTML コード:

<fieldset>
    <div class="control-group custom">
        <label class="input-mini" for="first">Start</label>
        <label class="input-mini" for="first">End</label>
        <label class="input-mini" for="first">Share</label>
    </div>
    <div class="control-group custom">
        <input type="text" class="input-mini">
        <input type="text" class="input-mini">
        <input type="text" class="input-mini">
    </div>
    <div>   
     <a id="plus_time_button" class="btn plus" href="#">
      <i class="icon-plus-sign"></i>
     </a>
    </div>
</fieldset>

JS コード:

 $("#plus_time_button").live("click", function () {
    var new_row = "<div class=\"control-group custom\"><input type=\"text\" class=\"input-mini\"><input type=\"text\" class=\"input-mini\"><input type=\"text\" class=\"input-mini\"></div><div><a id=\"plus_time_button\" class=\"btn plus\" href=\"#\"><i class=\"icon-plus-sign\"></i></a></div>";
    $("fieldset div:last-child").remove();
    $("fieldset").append(new_row);
});

CSS コード:

.custom label {
    padding: 4px 6px;
    margin-right: 20px;
    display: inline-block;
    text-align: center !important;
}
.custom input {
    margin-right: 20px;
}

やや似た質問がありますが、役に立ちません。

4

5 に答える 5

1

スペース。

元の HTML は次のようなコードを使用します。

<input ...>
<input ...>

追加した HTML は、次のようなコードを使用します。

<input ...><input ...>

最初のタグ間の空白は、追加された行に欠けているタグ間に少し余分なスペース (スペースのサイズ) をもたらします。

いくつかの戦略:

大まかに言えば、次のように迷惑な空白の干渉を回避できます。

<input type=text class=input-mini
><input type=text ...

末尾の山かっこは、すべての空白を消費するために次の行に折り返されます。

ただし、ここで実際に行うべきことは、元の行で使用したのと同じ DOM 要素を追加された行で再利用することなので、行ごとに違いはありません。

私がよく使うアプローチ：

http://jsfiddle.net/b9chris/3Mzs2/17/

単一行のテンプレートを作成します - 私は "T" の ID を使用するのが好きです:

<div id=T class="control-group custom">
  <input type=text class=input-mini>
  <input type=text class=input-mini>
  <input type=text class=input-mini>
</div>

テンプレート行を取得してその id を削除し、追加する必要があるときはいつでもそれを複製します。そうすれば、元の行でたまたま使用した HTML が追加で再利用されます。

var plus = $('#plus_time_button').closest('div');
var T = $('#T');
T[0].id = '';

for(var i = 0; i < 3; i++)
    plus.before(T.clone());

$('#plus_time_button').click(function () {
    plus.before(T.clone());
});

私の最初の回答では、既存のイベント構文を .live() で使用していました。おそらくまだ1.7または1.8を使用しているため、jQuery 1.9構文への変換は必要ありませんが、必要に応じて、上記のコードでライブを廃止します（実際には、ライブは不要になったため完全に破棄されます-問題のタグが DOM から削除されることはありません)。1.9 の .live() 呼び出しを変換する例は、jQuery ドキュメントで提供されています。

http://api.jquery.com/live/#entry-longdesc

于 2013-05-13T08:20:52.833 に答える