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/

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

1 个答案: