代码之家  ›  专栏  ›  技术社区  ›  TigerTiger

是否有类似jquery live的原型javascript函数来跟踪动态DOM元素?

  •  1
  • TigerTiger  · 技术社区  · 15 年前

    事件观察(窗口,“加载”,函数()。{ $$(“.elem_classs”).findall(函数(节点){ 返回node.getattribute(“title”); })每个(功能(节点){ 新工具提示(node,node.title); node.removeattribute(“标题”); (}); (});

    使用上述方法,我可以检索 ".elem_class" 并在上面应用一些javascript函数。但是我有一个模式/弹出框,其中有些元素也有“.elem_class”,这些元素在通过Ajax加载到DOM时不在findall/each的范围内。

    如何对动态加载的元素应用相同的内容? 我正在使用原型库。(我使用了jquery的live函数,它跟踪所有未来的元素,但需要使用原型实现类似的功能)

    谢谢。

    1 回复  |  直到 13 年前
        1
  •  1
  •   geowa4    15 年前

    据我所知,事件授权是在原型中构建的bot,但独立完成并不太困难。只需添加一个处理程序来观察 body 然后使用 Event#findElement 检查它是否与您的选择器匹配。

    下面是为您设置委派的示例函数(加载时运行此函数):

    /**
     * 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);
      });
    }
    

    您可能可以扩展元素来为您处理这个问题,从而简化所有内容。希望这有帮助!

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