jQuery CSS() for dynamically created elements

Question

I'm using jQuery CSS function to style some elements

$element.css(style);

This works, but a part of the elements are created dynamically after the page load. This should be

$element.live ('created',function() {
$(this).css(style);
});

I'm stuck on the created event. Any ideas?

How are the elements being created? Can you not just use a CSS class? — Nick Craver
– Nick Craver, Commented Sep 15, 2010 at 11:52

Andy E · Accepted Answer · 2010-09-15 12:00:23Z

24

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");

edited Sep 15, 2010 at 12:00

answered Sep 15, 2010 at 11:50

Andy E

346k86 gold badges482 silver badges452 bronze badges

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

3 Comments

Omar Abid Over a year ago

I was using a stylesheet and what I wanted to do is to get rid of it (less files) and use CSS since its inline CSS.

DisgruntledGoat Over a year ago

@Omar inline CSS is a very bad idea in general. There's nothing wrong with having one CSS file with your styles in. In fact it's beneficial because users will download it once and it should be cached on subsequent page views. Although I should say, inline CSS is fine when you need to do it dynamically, e.g. you don't know the required width/height of an element ahead of time.

KBN Over a year ago

@OmarAbid , you can just specify classes inside HTML which may or may not have CSS definitions in your CSS file. Jquery does not work based on the definitions of those classes.

Dev Matee · Accepted Answer · 2019-08-09 07:17:48Z

1

Best Idea is to Define CSS classes. And then Remove and add classes from Dynamic elements as per need

$(element).addClass("className");
$(element).removeClass("className");

Example: JS Fiddle

edited Aug 9, 2019 at 7:17

answered Aug 2, 2019 at 11:01

Dev Matee

5,9672 gold badges32 silver badges35 bronze badges

2 Comments

serge Over a year ago

sorry, I just tried that on a combobox (select>option), so this didn't work, but surely because "option" have no way to CSS the internal nested elements... so should be normal

Alex Khimich Over a year ago

This works only on present elements when JQ scans DOM. All new elements WILL NOT be scanned, thus, your solution does not work.

Rizier123 · Accepted Answer · 2015-02-15 21:02:06Z

0

$('head').append('
< style >
.folder { background: url(../icons/Folder_icons/g/f.png) no-repeat left top;} < / style >');

edited Feb 15, 2015 at 21:02

Rizier123

59.8k17 gold badges106 silver badges167 bronze badges

answered Feb 15, 2015 at 20:44

user2935404

11 bronze badge

Collectives™ on Stack Overflow

jQuery CSS() for dynamically created elements

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related