将类添加到动态生成的 HTML答案

【问题标题】：Add class to dynamically generated HTML将类添加到动态生成的 HTML
【发布时间】：2014-10-08 20:54:43
【问题描述】：

我正在努力将自定义复选框样式与由 javascript 为 Google Identity Toolkit 动态生成的复选框一起使用。比如我们添加这个div：

<div id="gitkitWidgetDiv"></div>

Google Identity Toolkit 脚本会为该 div 生成新的 html。

我需要将一个类添加到由 javascript 添加的 HTML 中，而无需用户进行任何操作，我正在努力使其工作。例如，这是我的代码：

$("#gitkitWidgetDiv").on('ready', ".gitkit-sign-in-options label", function() {
    $(this).addClass('checkbox');
});

我尝试为其他一些选项切换“准备就绪”并使用 livequery 插件，但对我来说没有任何效果。如果我使用像“点击”这样的活动事件，它会起作用，但我不知道在页面加载时如何做到这一点。有人可以帮忙吗？谢谢！

【问题讨论】：

好吧，当你生成这些元素之后，你可以选择它们并应用类，对吧？向我们展示创建元素的代码。
动态是指在用户交互之后？或者您的意思是您使用来自外部服务的一些 javascript 代码请求它？
不幸的是，我不控制生成元素的代码。它是由 www.gstatic.com/authtoolkit/js/gitkit.js 添加的。
你有那个库的任何文档并检查过任何事件吗？
我支持@DontVoteMeDown - 如果这个库生成新的 HTML，我通常希望它们生成某种事件，或者让您添加侦听器的函数。可能值得简要阅读他们的文档。

标签： javascript jquery html

【解决方案1】：

Modern browsers（包括IE11）支持mutation obervers。您可以使用一个来监视将要添加的 div 的父节点。添加 div 后，添加类即可。

【讨论】：

谢谢。不幸的是，我需要支持 IE 9 & 10。
我认为这不是现在的答案。我们正在尝试发现该库是否具有该作业的文档和事件侦听器。我这么说是因为那些观察者会降低性能，并且必须是最后的选择。
我想知道解决新的 CSS 类是否更容易，例如使用更复杂的 CSS 选择器或使用“实时”事件。
我不明白你所说的现场活动是什么意思。你能提供更多信息吗？
参见api.jquery.com/live（即使今天使用 on() 完成）。基本上，您为目标的父级注册了一个事件处理程序，并在该处理程序中检查事件目标是否与您要监视的元素匹配。此技术允许您为尚不存在的元素注册事件处理程序。

【解决方案2】：

这是我制作的东西，在这种令人讨厌的情况下会派上用场，在这种情况下很难判断您需要的元素何时完成加载：https://gist.github.com/DanWebb/8b688b31492632b38aea

所以在包含函数之后，它会是这样的：

var interval = 500,
    stopTime = 5000,
    loaded = false;
setIntervalTimeout(function() {
    if($('.dynanicElementClass').length && !loaded) {
       $('.dynanicElementClass').addClass('checkbox');
       loaded = true;
    }
}, interval, stopTime);

它并不完美，我相信有更好的解决方案，但在大多数情况下，它可以完成工作。

【讨论】：