如何将CSS样式应用于由jquery的append（）创建的元素？

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

你需要把一个space在2个输入框，当你append它们之间。

看看这个工作演示它是好的，现在

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