How to apply CSS styling to elements created by jquery's append()?

Question

I am trying to create a dynamic form, and have run into a problem with styling that makes itself quite apparent when you add elements to a form. There is styling added to inputs on load that aren't applied to any created when I add them with jQuery's append() function. The margins are nonexistant on the new input elements, whereas if I add them manually in the beginning on page load the styling is there. Seems to be some browser default styling which I cannot override. How do I fix this? Example code below.

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();
    });
});

Too much code to read, but simple way is to keep it in a variable.. var elm=$("#adiv").append("<span>something</span>");elm.css("background","red"); — Muhammad Usman
– Muhammad Usman, Commented Aug 15, 2011 at 20:08

ShankarSangoli · Accepted Answer · 2011-08-15 20:04:50Z

5

You need to put a space in between 2 input boxes when you append them.

Take a look at this working demo it is fine now

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

answered Aug 15, 2011 at 20:04

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to apply CSS styling to elements created by jquery's append()?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related