Question

我正在使用jQuery将元素附加到div，并且一切正常。

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

然而，我希望div通过淡入而不是突然出现。

我注意到当我尝试访问动态生成的元素上的图形属性时出现错误。所以这例如失败了：

 new_div.hide().fadeIn();

控制台报告以下错误：

 TypeError: jQuery.curCSS is not a function

我是否理解这一点，这是失败的，因为没有为动态生成的元素定义当前的css属性？或者还有什么可能会出错？

重要编辑 对此进行的额外检查和处理表明我完全存在误解。这与元素是动态生成的事实无关。我通过在任何元素上调用fadeIn（）来获得相同的东西。我真诚地道歉！但是，我仍然没有得到为什么会发生这种情况

Answer 1

向DOM添加元素需要一些时间，也许需要几毫秒，但这仍然是jquery无法找到元素的原因。如果DOM是一个大的html页面，这个过程可能会更慢。

编写如下代码：

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

    new_div.hide().fadeIn(); 

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

jquery可能有足够的时间来捕获元素。

Answer 2

我会添加一个id来跟踪我正在创建的所有元素（只是我的偏好，但它使编码更容易）。

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

Answer 3

这似乎是一个兼容性问题，虽然我无法弄清楚究竟为什么以及如何解决它。添加此代码可以解决问题：

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

Jquery，无法访问动态生成元素的css属性

3 个答案: