Jquery - 添加 DOM 元素时运行函数
我有一个带有 jQuery 和 jQuery UI 的网站。我有一个 Javascript 函数：
function ToButton()
{
$(".ToButton").button();
}
该函数在页面加载后运行并更改具有“ToButton”类的所有元素。
当用户按下按钮时，我还会更改 HTML 代码。例如：
$("body").append('<span class="ToButton">Test Button</span>');
我也想对这个新元素运行 ToButton 函数，但是 jQuery 中的实时或委托方法没有“show”或“create”事件类型。所以我需要在所有 HTML 代码更改后调用函数 ToButton() 。
你能帮我吗，我如何将 ToButton 函数委托给所有元素？
I have a website with jQuery and jQuery UI. I have a Javascript function:
function ToButton()
{
$(".ToButton").button();
}
This function runing after the page load and change all elements with class "ToButton".
Also I change HTML code when user press a button. E.g.:
$("body").append('<span class="ToButton">Test Button</span>');
And I want to run ToButton function to this new element too, but live or delegate methods in jQuery don't have "show" or "create" event type. So I need call function ToButton() after all HTML code changes.
Can you help me, how I can delegate ToButton function to all elements?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您需要在添加新元素后手动执行此操作。代表和现场活动仅适用于冒泡的活动。
但是，您可以通过监听一些 DOM 事件 来获得通知，从而使生活变得更轻松添加了一个新元素。
You need to do this manually after appending new elements. Delegates and live events are only for events that bubble up.
However, you could make life more easier by listening for some of the DOM events to get a notification when a new element has been added.
您可以通过以下几种方式实现此目的：
1) 使用突变事件或观察者
第一种方法很容易查找，您可以在此处找到有关 DOM Level 3 Mutation Events 的更多信息：http://help.dottoro.com/ljmcxjla.php - 和新的 DOM Level 4变异观察者在这里：https://developer.mozilla.org/en-US/docs /DOM/MutationObserver
虽然 DOM Level 3 Mutation Events 现在得到了广泛支持，但它们是一个已弃用的 API，可能会降低某些浏览器的性能。下面的 #2 使用的方法适用于所有支持 CSS 动画的浏览器，并且不会影响性能。
2) 使用我设计的 CSS 关键帧动画事件方法来检测 DOM 节点插入
每当浏览器的内部 CSS 样式机制解析节点时，您可以使用虚拟关键帧动画事件来冒泡插入事件通知，我在这里写了一篇非常详细的文章：http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/
You can achieve this a couple of ways:
1) Use Mutation Events or Observers
The first method is easy to look-up, you can find more on DOM Level 3 Mutation Events here: http://help.dottoro.com/ljmcxjla.php - and new DOM Level 4 Mutation Observers here: https://developer.mozilla.org/en-US/docs/DOM/MutationObserver
While DOM Level 3 Mutation Events are widely supported now, they are a deprecated API that can kill performance in certain browsers. #2 below uses a method that works in all browsers that support CSS Animations, and it doesn't hurt performance.
2) Use the CSS Keyframe Animation event method I devised to detect DOM node insertions
You can use a dummy keyframe animation event to bubble up an insertion event notification whenever a node is parsed by the browser's internal CSS styling mechanisms, I wrote a very detailed post on this here: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/
您可以创建一个像这样的简单函数：
Use like 这
不是最好的方法，但您也可以创建一个简单的 jQuery 插件或类似的东西。我只是提出了一个总体想法（我这样说是因为您使用了以类似方式构建的函数）。
当然最好是使用 DOM 事件，但由于 IE，我们不能。
You could create a simple function like this:
Use like
Not the nicest way, but you could also create a simple jQuery plugin or something like that. I just presented a general idea (I put it like this because you used a function built in a similar way).
Of course the best would be to use DOM events, but thanks to IE we cannot.
嗯，不确定我是否正确，但这不起作用吗？：
仅供您参考：
http://www.bennadel.com/blog /1751-jQuery-Live-Method-And-Event-Bubbling.htm
uhm, not sure if I got it right, but doesn't this work?:
just for your refference:
http://www.bennadel.com/blog/1751-jQuery-Live-Method-And-Event-Bubbling.htm