Jquery, cannot access css properties of dynamically generated element

Question

I am using jQuery to append elements to a div, and all works fine.

var new_div = $('<div>My stuff</div>');
new_div.appendTo("#container");

However, I'd like the div to appear by fading in, instead of abruptly.

I notice though that I get an error when I try to access graphic properties on my dynamically generated element. So this, for example fails:

 new_div.hide().fadeIn();

The console reports the following error:

 TypeError: jQuery.curCSS is not a function

Do I understand this correctly, that this fails because current css properties are not defined for the dynamically generated element? Or what else can be goingg wrong?

Important edit Additional checking and working on this pointed out to a complete misunderstanding from my part. This has nothing to do with the fact that the element was dynamically generated. I got the same thing by calling fadeIn() on whatever element. I sincerely apologize! I still didn't get, though, why this happens

You forgot parenthesis after .hide. new_div.hide().fadeIn(); should work. The TypeError seems to belong to something else? — M_T
– M_T, Commented May 23, 2016 at 22:11
since jquery 1.8.0 curCSS method has being removed from jquery core. Use css() instead. — Evhz
– Evhz, Commented May 23, 2016 at 22:13
@Mois44, ops, sorry, misspelled while writing the answer. That isn't it though, as it was correct in my original code — DavidTonarini
– DavidTonarini, Commented May 23, 2016 at 22:16
@Karlos, I read as much, but how exactly am I "using" them? I am just using hide() and fadeIn() — DavidTonarini
– DavidTonarini, Commented May 23, 2016 at 22:16
it could be the jquery core if you don't implicitly wrote curCSS in your code... — Evhz
– Evhz, Commented May 23, 2016 at 22:30

Evhz · Accepted Answer · 2016-05-23 22:20:13Z

1

Adding elements to the DOM takes some time, miliseconds maybe, but it's still a reason for jquery not be able to find the element.
This process might be even slower if the DOM is a large html page.

Write your code like this:

var new_div = $('<div>My stuff</div>');
new_div.appendTo("#container");
setTimeout( function(){ 

    new_div.hide().fadeIn(); 

} , 150); // 100 could be also good

It might be enough time for jquery to catch the element.

answered May 23, 2016 at 22:20

Evhz

9,3729 gold badges55 silver badges71 bronze badges

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

1 Comment

M_T Over a year ago

FYI: You can manipulate the new element even before appending it to another element. It's created in the first line and referenced by the variable "new_div". This has nothing to do with asynchronicity (also, DOM manipulations like appendTo aren't asynchron).

Running Buffalo · Accepted Answer · 2016-05-23 22:49:02Z

0

I would add an id to keep track of all elements I'm creating (just my preference, but it makes it easier to code it).

var new_div = '<div id="myNewDiv1" style="display:none;">My Styff</div>'
$('body').append(new_div);
$('#myNewDiv1').fadeIn();

answered May 23, 2016 at 22:49

Running Buffalo

1,3232 gold badges11 silver badges17 bronze badges

Comments

DavidTonarini · Accepted Answer · 2016-06-22 23:26:12Z

0

It does seem to be a compatibility question, although I wasn't able to figure out exactly why and how to fix it. Adding this code fixes the problem though:

jQuery.curCSS = function(element, prop, val) {
  return jQuery(element).css(prop, val);
};

answered Jun 22, 2016 at 23:26

DavidTonarini

9514 gold badges17 silver badges35 bronze badges

Collectives™ on Stack Overflow

Jquery, cannot access css properties of dynamically generated element

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related