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

Question

我有一个带有 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 功能委托给所有元素？

score 2 · Accepted Answer

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

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/

score 2 · Accepted Answer

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

但是，您可以通过侦听某些DOM 事件以在添加新元素时获得通知来使生活更轻松。

score 0 · Accepted Answer

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

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

使用喜欢

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

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

当然最好的办法是使用 DOM 事件，但多亏了 IE，我们不能。

score 0 · Accepted Answer

嗯，不确定我是否做对了，但这不起作用吗？：

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

4 回答 4