Jquery target dynamically created element with css

Question

I have some HTML that is dynamically generated by another component. A simplified version could be:

<div class="classA">
 <div class="classB">Hello!</div>
</div>

The classB element isn't available at (document).ready, but when it's created it's created with some inline CSS which I want to change. Since the element isn't available at (document).ready, I can't just do

$('.classB').css('color', 'red');

and since the element is created with some inline css, I can't use an ordinary style sheet.

Question:

How do I apply CSS with jQuery to an element which isn't available at (document).ready?

tried to use `$(this)` in the (onclick)func? this should be your .classB div layer, so u can use `$(this).css('color':'red')` — UnskilledFreak, Dec 18 '14 at 15:29
The element is added after (document).ready, and also with inline CSS. So CSS in a style sheet (even with !important) won't work. — Bo., Dec 19 '14 at 10:13

score 0 · Answer 1 · answered Dec 18 '14 at 15:31

0

Dynamically altering the dom means that to include click events means you have to attach events to the dom.

try something like

$(document).on("click",".classB", function(){
    $('.classB').css('color', 'red');
 });

should work for you.

You need to bind the event to a parent element, of which document is usually chosen by most.

answered Dec 18 '14 at 15:31

jbutler483

24,074
9
92
145

This doesn't make any sense! OP has already given which works perfectly, he is just asking when the element having `.classB` is available (means added to DOM) he wants to apply css code on it – Dhaval Marthak Dec 18 '14 at 15:32
But surely that could be placed on the 'creation' of that element? – jbutler483 Dec 18 '14 at 15:35
Yup.. that can be that's why added comment over his question! – Dhaval Marthak Dec 18 '14 at 15:36
My thoughts were that ClassA may *also* be created dynamically, and hence have issues – jbutler483 Dec 18 '14 at 15:40
I may be wrong but this code is about click to add css? I'd like it applied the moment the element is present. – Bo. Dec 18 '14 at 19:24
@Bo: Do you bac know if it will be given a specific class/id – jbutler483 Dec 19 '14 at 09:03
Sorry, don't know what you mean? – Bo. Dec 19 '14 at 10:10
on the creation of your 'element', does it get given an id? – jbutler483 Dec 19 '14 at 10:18

score 0 · Answer 2 · answered Dec 18 '14 at 15:32

0

I am not 100% sure of what your asking but i think you are askign for style to be applied to an element as soon as it arrives am i right?

If that is the case have a look into http://api.jquery.com/css/ this should be what you are looking for it is rather simle to use.

This style would allow you to apply effects with css straight to the element on generation. My Jquery might be a bit out not done it in a while

$('.classA').css( "background-color" : "red" );

This would go in your:

$(document).ready(fucntion(){
    //here
});

If this is going to generate when the user clicks the page look at the appropriate onClick function for you document or for your element here: http://api.jquery.com/click/

answered Dec 18 '14 at 15:32

Kieranmv95

828
4
14
31

The element is not present at that time. – Bo. Dec 18 '14 at 19:12
when it does become available it will apply the css if you embed the first option within the document ready. And i think the equivilent to the click code mentioned in your Question is as follows `$(//YourChoice).click(function(){$('.classB').css('color', 'red');});` – Kieranmv95 Dec 18 '14 at 19:43
Are you sure? That's why I examplified with the click -code. You need a different approach if the element isn't available at document ready. – Bo. Dec 18 '14 at 19:47
Yeah, maybe it wasnt to educational to examplify with click-code. I want it automatically, not by click. – Bo. Dec 18 '14 at 19:50
I think this is somewhat what you are trying to achieve http://jsfiddle.net/#&togetherjs=Hb4FbVNcCG – Kieranmv95 Dec 18 '14 at 19:50
I it hasn't been solved tomorrow will see if anyone at work knows any Jquery :) – Kieranmv95 Dec 18 '14 at 20:05

score 0 · Answer 3 · answered Dec 18 '14 at 15:38

0

Since your code is not complete but consider following prototype.

You're using some code to append element having classB to particular div having classA so in this case you need to target that .classB using following code.

$(".classA").html("<div class='classB'></div>").find(".classB").css("color","red");

You can use .find() immediately after the creation of an element and apply your css code to it

See Demo

I think this might help you.

answered Dec 18 '14 at 15:38

Dhaval Marthak

17,246
6
46
68

Don't know the code behind element creation so wont work – Bo. Dec 18 '14 at 19:13

score 0 · Answer 4 · edited May 23 '17 at 12:28

It is not good practice to define css in your Javascript unless you have a particularly good reason to do so. It makes the division between logic and styling difficult to maintain.

In your case you seem to want to use a class, which makes sense, so then it will be easy to define the css for that class in a stylesheet. The stylesheet can be defined in the head of your html document or it can be linked to from the head of your html document.

You can also inject the html stylesheet later, if you are required to do so. Add stylesheet to Head using javascript in body

If you have the class defined in your stylesheet like below, the style will be applied to the element as soon as it is added to the DOM.

.classB 
{
color:red;
}

Jquery target dynamically created element with css

4 Answers4

See Demo