Add CSS Rule via Jquery for Future Created Elements

Add CSS rule via jQuery for future created elements

This should work:

var style = $('<style>.class { background-color: blue; }</style>');
$('html > head').append(style);

jQuery CSS() for dynamically created elements

There's no event for elements created (not universally available, anyway). You could

Add the rules to a stylesheet so that they are automatically applied to the newly created elements

Chain the css() method when you create your elements:

$('<img id="createdImage" src="some.jpg"/>')
    .appendTo(document.body)
    .css(style);

Create a new stylesheet dynamically:

$("<style>").text("#myNewEl { width:20px; height:30px; }").appendTo("head");

Persistent css rule changes for dynamically created elements

You order javascript at execution time to add an inline style to all elements with class 'red', coloring them blue. After that you add new elements to the DOM. They have no knowledge of the earlier command an therefore are not influenced by them.

This solves your problem, as this adds a style rule to the document. This influences all elements and is 'persistent':

$( "<style>.red { background: blue; }</style>" ).appendTo( "body" );

See: https://jsfiddle.net/aLghL2ke/

Note that if you want to run this command multiple times, it would be nice to remove the old style block from your code. This can be done with jQuery too using this command:

$( "body style" ).remove();

See: https://jsfiddle.net/4duxsz0a/