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


Tags: javascript,jquery,html,css

Problem :

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


Solution :

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/


    CSS Howto..

    How do I show annotations on my Google Chart that extracts data from a Google Spreadsheet?

    How can I give a settimeout to a div on first click but not on second click?

    How can I manage css and php gd2 font size?

    How to maintain consistent text and image positioning using CSS

    How use Append Jquery

    How to format an arabic poem using jquery?

    How to vertically align the text into a coloured div using CSS?

    How to fix my nav bar? Positioning is different on different screens

    How to make jquery click() work with css button?

    How to make a main div appear next to a sidebar

    How To Have Margin For Background Image?

    How can I get the current state of my div animation?

    How to wrap text in table cell at hyphen?

    How to change css of element using jquery

    In IE6, how to float item to right without clearing it?

    How do CSS sprites speed up a web site?

    How can I force Internet Explorer to apply CSS styles

    How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?

    How do I show a background image in the first part of a page and make it cover 100% of the visible part of the screen?

    problem with internet explorer showing html input button which is hidden

    How do I create a full screen click target to work with CSS-only navigation menu with :target?

    How to get a website's position setup in a way that an image is centred?

    How to set columns 100% height within body using css

    How to reverse a sequence of CSS transitions and transforms which contain span:nth-child

    How to highlight table rows if error is found - Jquery

    How to reanimate div with jquery after using css keyframe animation

    jQuery UI how to avoid submit button getting css classes?

    How to make css transform-origin property work in IE7 and IE8?

    What is cufon and canvas and how to overwrite them

    How do I customize