使用 jQuery 为动态生成的 div 设置样式答案

【问题标题】：Styling dynamically generated divs with jQuery使用 jQuery 为动态生成的 div 设置样式
【发布时间】：2013-08-16 02:34:54
【问题描述】：

以下代码有效：

$('#class').on('mouseover', '.ado', function() {
 var colors = ["#848484", "#088a08", "#ffbf00", "#a901d8", "#ff0000", "#0000ff"];
    var i = 0;
    $('.ado').each(function(i) {
    $(this).css({'border-left-width' : '5px', 'border-left-style' : 'solid', 'border-left-color' : colors[i]});
    i = (i + 1)%colors.length;
  });
});

class.ado 的 div 是在 div #class（在页面加载时存在）中动态生成的，并且代码为每个实例设置了不同颜色的左边框。问题是我无法让它在加载时工作 - 仅在鼠标悬停（或单击等）时。我从 jQuery 网站了解到“加载”是不会冒泡的事件之一，因此 .on('load', '.ado', function() { 不起作用。如何在没有任何用户操作的情况下将样式应用于页面加载？

谢谢。

【问题讨论】：

标签： jquery styles onload event-bubbling

【解决方案1】：

您可以手动触发这些元素的鼠标悬停事件

$('#class .ado').trigger('mouseover')

【讨论】：

'setTimeout(function() { $('.ado').trigger('mouseover'); },3000);' - 这行得通，但setTimeout 函数不是一个好主意。使用$(document).ready(function() 不起作用，可能是因为动态加载遵循地理位置（弹出用户同意） - 这就是为什么 setTimeout 也可能不是正确的解决方案（不知道用户需要多长时间接受）。我试过('#class').ajaxStop(function() - 但也没有运气。在用户接受地理位置后，我似乎需要找到一个 div 已加载的迹象。感谢您的帮助。
@sideroxylon .ado 元素是如何加载的，是通过 ajax 请求吗？
解决了！我把你的代码放在了错误的地方——我在附加 .ado 类的代码之后立即添加了它。现在完美运行。谢谢。
@sideroxylon 是的，它必须是这样的

【解决方案2】：

你在找吗

$(document).ready(function() { });

http://api.jquery.com/ready/

【讨论】：