Question

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

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

此功能在页面加载后运行，并使用“ToButton”类更改所有元素。

当用户按下按钮时，我也会更改HTML代码。 E.g：

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

我也希望将ToButton函数运行到这个新元素，但jQuery中的live或delegate方法没有“show”或“create”事件类型。所有HTML代码更改后我都需要调用函数ToButton（）。

你能帮助我，我如何将ToButton函数委托给所有元素？

Answer 1

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

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

Answer 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 Level 3 Mutation事件现在得到广泛支持，但它们是一种弃用的API，可能会破坏某些浏览器的性能。下面的＃2使用的方法适用于支持CSS动画的所有浏览器，并且不会影响性能。

2）使用我设计的CSS关键帧动画事件方法来检测DOM节点插入

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

Answer 3

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

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

Answer 4

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

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

使用

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

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

当然最好的方法是使用DOM事件，但感谢IE我们不能。