jqueryのappend（）で作成した要素にCSSスタイルを適用するにはどうすればよいですか？

Question

私は動的なフォームを作成しようとしており、フォームに要素を追加するときに非常に顕著なスタイリングに問題があります。 jQueryのappend()関数で追加したときに、ロード時の入力にスタイリングが追加されました。マージンは新しい入力要素には存在しませんが、ページロードの最初に手動で追加すると、スタイリングがそこにあります。私がオーバーライドできないブラウザのデフォルトのスタイリングであるようです。これをどうやって解決するのですか？以下のコード例。

CSS：

#GraphTools 
{ 
    border-top: 1px solid #BBBBBB; 
    height: 24px; 
    margin: 0 5px 3px; 
    padding-top: 2px; 
} 

#GraphSearch 
{ 
    float: left; 
} 

#GraphTools input 
{ 
    background-color: rgba(255, 255, 255, 0.4); 
    border-radius: 3px 3px 3px 3px; 
    box-shadow: 0 0 2px #444444 inset; 
    font-size: 14px; 
    padding: 2px; 
} 

#GraphTools input[type=button]:active, #GraphTools input[type=submit]:active 
{ 
    background-color: rgba(192, 192, 192, 0.4); 
} 

#GraphSearchFields 
{ 
    float: left; 
    margin-right: 5px; 
} 

#GraphSearchFields input 
{ 
    margin: 0 5px 0 5px; 
} 

#GraphZoom 
{ 
    float: right; 
} 

HTML：

<div id="GraphTools"> 
    <div id="GraphSearch"> 
     <form id="GraphSearchForm"> 
      <div id="GraphSearchFields"> 
       <input type="text" data-default-value="Sender" id="SenderBox0" class="GraphSearchBox" /> 
       <input type="text" data-default-value="Reciever" id="RecieverBox0" class="GraphSearchBox" /> 
       <input type="text" data-default-value="Sender" id="SenderBox1" class="GraphSearchBox" /> 
       <input type="text" data-default-value="Reciever" id="RecieverBox1" class="GraphSearchBox" /> 
      </div> 
      <input type="button" id="AddNewHumanSet" value="+" /> 
      <input type="submit" value="Go" /> 
      <input type="button" value="Reset" class="GraphResetButton" /> 
     </form> 
    </div> 
    <div id="GraphZoom"> 
     <input type="button" value="-" /> 
     <input type="button" value="+" /> 
    </div> 
</div> 

Javascriptを：

$(document).ready(function() 
{ 
    function LoadDefaultSearchBoxValues() 
    { 
     $(".GraphSearchBox").each(function (i, e) 
     { 
      if ($(this).val() == "") 
      { 
       $(this).val($(this).data("default-value")); 
      } 
     }); 
    } 
    LoadDefaultSearchBoxValues(); 
    $(".GraphSearchBox").live("focus", function() 
    { 
     if ($(this).val() == $(this).data("default-value")) 
     { 
      $(this).val(""); 
     } 
    }); 
    $(".GraphSearchBox").live("blur", function() 
    { 
     if ($(this).val() == "") 
     { 
      $(this).val($(this).data("default-value")); 
     } 
    }); 
    $("#GraphSearchForm").live("submit", function (event) 
    { 
     event.preventDefault(); 

     var SenderBoxHasValue = !($("#SenderBox").val() == $("#SenderBox").data("default-value") && $("#SenderBox").val() == ""); 
     var RecieverBoxHasValue = !($("#RecieverBox").val() == $("#RecieverBox").data("default-value") && $("#RecieverBox").val() == ""); 
     if (SenderBoxHasValue && RecieverBoxHasValue) 
     { 
      graph.filterEdges(function (edge) 
      { 
       return edge.source.data.label.toLowerCase().indexOf($("#SenderBox").val().toLowerCase()) != -1 && 
         edge.target.data.label.toLowerCase().indexOf($("#RecieverBox").val().toLowerCase()) != -1; 
      }); 
     } 
     else if (SenderBoxHasValue) 
     { 
      graph.filterEdges(function (edge) 
      { 
       return edge.source.data.label.toLowerCase().indexOf($("#SenderBox").val().toLowerCase()) != -1; 
      }); 
     } 
     else if (RecieverBoxHasValue) 
     { 
      graph.filterEdges(function (edge) 
      { 
       return edge.target.data.label.toLowerCase().indexOf($("#RecieverBox").val().toLowerCase()) != -1; 
      }); 
     } 
    }); 
    $(".GraphResetButton").live("click", function() 
    { 
     graph.resetGraph(); 
    }); 
    $("#AddNewHumanSet").live("click", function() 
    { 
     var inputcount = $("#GraphSearchFields").children("input").length/2; 
     var mod4 = $("#GraphSearchFields").children("input").length % 4; 
     if (mod4 == 0) 
     { 
      $("#GraphSearchFields").append("<br />"); 
     } 
     $("#GraphSearchFields").append('<input type="text" data-default-value="Sender" id="SenderBox' + inputcount + '" class="GraphSearchBox" /><input type="text" data-default-value="Reciever" id="RecieverBox' + inputcount + '" class="GraphSearchBox" />'); 
     LoadDefaultSearchBoxValues(); 
    }); 
}); 

Answer 1

あなたはあなたappendそれら2つの入力ボックス間でspaceを配置する必要があります。

それが今

結構です、この作業のデモを見てみましょう

http://jsfiddle.net/2xfED/1/