javascript - 有没有类似于 Jquery Live 的 Prototype Javascript 函数来跟踪动态 dom 元素？

Question

Event.observe(窗口,"加载",function() { $$(".elem_classs").findAll(函数(节点){ 返回node.getAttribute('标题'); }).each(函数(节点){ 新的工具提示(节点，节点.标题)； 节点.removeAttribute(“标题”); }); });

使用上述方法，我可以检索所有具有 ".elem_class" 的元素并对其应用一些 JavaScript 函数。但我有一个模态/弹出框，其中有一些元素也具有“.elem_class”，并且这些元素不会进入 findAll/each 的范围，因为它们通过 ajax 加载到 dom 中。

如何将相同的方法应用于动态加载的元素？ 我正在使用原型(prototype)库。 (我已经使用了 JQuery 的 Live 函数来跟踪所有 future 的元素，但需要使用 Prototype 来实现类似的功能)

谢谢。

Answer 1

据我所知，事件委托(delegate)是内置于 Prototype 中的机器人，但您自己完成应该不会太困难。只需添加一个处理程序来观察 body 上的事件，然后使用 Event#findElement检查它是否与您的选择器匹配。

这是一个为您设置委托(delegate)的示例函数(在加载时运行它):

/**
 * event_type: 'click', 'keydown', etc.
 * selector: the selector to check against
 * handler: a function that takes the element and the event as a parameter
 */
function event_delegator(event_type, selector, handler) {
  Event.observe(document.body, event_type, function(event) {
    var elt = Event.findElement(event, selector);
    if (elt != document)
      handler(event, elt);
  });
}

您可以扩展 Element 来为您处理此问题，从而简化一切。希望这有帮助!

编辑:悬停事件(或 mousein/mouseout)对于工具提示来说应该是一个很好的事件。另外，不要加载所有元素，这在使用事件委托(delegate)时是不必要的。以下是有关事件委托(delegate)的更多信息的链接:http://www.sitepoint.com/blogs/2008/07/23/javascript-event-delegation-is-easier-than-you-think/