javascript - 如何将 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

当您append它们时，您需要在两个输入框之间放置一个空格。

看看这个工作演示，现在好了

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