Jquery - 添加DOM元素时运行功能答案

【问题标题】：Jquery - run function when DOM element is addedJquery - 添加DOM元素时运行功能
【发布时间】：2011-08-10 20:02:34
【问题描述】：

我有一个带有 jQuery 和 jQuery UI 的网站。我有一个 Javascript 函数：

function ToButton()
{
$(".ToButton").button();
}

此函数在页面加载并更改所有具有“ToButton”类的元素后运行。

当用户按下按钮时，我也会更改 HTML 代码。例如：

$("body").append('<span class="ToButton">Test Button</span>');

我也想对这个新元素运行 ToButton 函数，但是 jQuery 中的 live 或 delegate 方法没有“show”或“create”事件类型。所以我需要在所有 HTML 代码更改后调用函数 ToButton()。

你能帮我吗，如何将 ToButton 功能委托给所有元素？

【问题讨论】：

【解决方案1】：

您需要在添加新元素后手动执行此操作。代表和现场活动仅适用于冒泡的活动。

但是，您可以通过收听一些DOM events 来让生活更轻松，以便在添加新元素时收到通知。

【讨论】：

【解决方案2】：

您可以通过以下几种方式实现：

1) 使用突变事件或观察者

第一种方法很容易查找，您可以在此处找到更多关于 DOM Level 3 Mutation Events 的信息：http://help.dottoro.com/ljmcxjla.php - 以及新的 DOM Level 4 Mutation Observers 此处：https://developer.mozilla.org/en-US/docs/DOM/MutationObserver

虽然现在广泛支持 DOM 3 级突变事件，但它们是一种已弃用的 API，可能会降低某些浏览器的性能。下面的#2 使用了一种适用于所有支持 CSS 动画的浏览器的方法，并且不会影响性能。

2) 使用我设计的 CSS Keyframe Animation 事件方法来检测 DOM 节点插入

当浏览器的内部 CSS 样式机制解析节点时，您可以使用虚拟关键帧动画事件来冒泡插入事件通知，我在这里写了一篇非常详细的帖子：http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

【讨论】：

【解决方案3】：

你可以像这样创建一个简单的函数：

function AddButton (parent, buttonElement) {
    $(buttonElement).addClass('.ToButton').appendTo($(parent)).button();
}

像这样使用

AddButton('body', '<span>Test Button</span>');

不是最好的方法，但您也可以创建一个简单的 jQuery 插件或类似的东西。我只是提出了一个大概的想法（我这样说是因为您使用了以类似方式构建的函数）。

当然最好是使用 DOM 事件，但是由于 IE 我们不能。

【讨论】：

【解决方案4】：

嗯，不知道我是不是做对了，但这不起作用吗？：

$("body").append( $('<span class="ToButton">Test Button</span>').button() )

【讨论】：

您好！谢谢你的答案。我认为，您的代码可以工作，但我不需要多次使用 button() 或 ToButton() 函数。我想“委托”一次此功能，不再在页面上使用它。
好吧，正如 ThiefMaster 正确指出的那样，您将无法通过委托或直播来做到这一点。从理论上讲，您可以实现一种您想要的功能，但说真的，没有必要这样做。在这种情况下，完全有效的解决方案是在新创建的元素上使用 .button()