Re-apply jQuery select box styling when new select box is added to page

Question

My jQuery select box styling works on the initial page load, but when content with a select box is dynamically loaded into the page, the styling isn't applied to it.

What's the best way to make sure the new select box will be styled as soon as it is loaded onto the page?

jQuery(document).ready(function() {
    jQuery.jStyling.createSelect(jQuery('select'));
});

Answer 1

Try using CSS instead of jQuery

select {
    //Styling
}

Or by class or id if needed.

.classOfSelect {
    //Styling
}

Answer 2

I've had this issue when dynamically making tables with alternating band colors, this is how I did it:

Working Fiddle

HTML:

<input id="add" type="button" value="Add Box"></input>
<div class="styled">BOX</div>

JavaScript:

function addStyle() {
    $(".styled").css({
        "width": "100px",
        "height": "100px",
        "background": "#ff0000"
    });
};

$(document).on("click", "#add", function () {
    var myBox = $("<div>");
    myBox.addClass("styled");
    myBox.text("BOX");
    myBox.appendTo($("body"));
    addStyle();
});

addStyle();