Mootools：如何将点击功能绑定到以编程方式生成的元素

Question

我有一个普通的 javascript 函数，当单击按钮时，它会在页面中生成一些链接。现在我想为这些生成的链接添加一个点击功能。我已经为每个类添加了一个类，但它仍然无法正常工作。一切都是实时发生的，下面的 mooTools 脚本不起作用，尽管它可以很好地加载到页面中。

window.addEvent('domready', function() {
    $$('.jTrigger').addEvent('click', function(){alert('clicked!');})
    })

我正在寻找与

等效的 jQuery

$(document).ready(function()
{
$(".myClass").live("click", function()
{
  do stuff here...
};
});

我会使用 Closure 或 jQuery（我知道如何使用的东西），但我正在开发一个 Joomla 后端插件，我被告知要坚持使用 MooTools。

Answer 1

MooTools 也支持event delegation。这是文档中的示例：

// Adding the event, notice the :relay syntax with the selector that matches the target element inside of myElement.
// Every click on an anchor-tag inside of myElement executes this function.
myElement.addEvent('click:relay(a)', function(event, target){
    event.preventDefault();
    request.send({
        url: target.get('href')
    });
});

所以猜测一下（我从未使用过 MooTools），我会说，如果您已将 myClass 类添加到相关元素中：

window.addEvent('domready', function() {
    $(document).addEvent('click:relay(.myClass)', function() {
        // One of the elements was clicked
    });
});

---

如果您使用的是不支持事件委托的旧版 MooTools，这不是问题，您可以自己完成。基本上，您将事件挂在容器上（可以是document.body，但如果可能的话，再次靠近添加元素的位置），然后在引发事件时，查看event.target，它会告诉您是事件发生的实际元素。从event.target 开始，检查每个父母是否有myClass。如果是，则处理该事件。这么粗略：

$(container).addEvent('click', function(event) {
    var match, elm;
    for (elm = event.target; !match && elm; elm = elm.parentNode) {
        if ($(elm).hasClass("myClass")) {
           match = elm;
        }
    }
    if (match) {
        // Yup, its a "myClass" element -- process the click
    }
});

Answer 2

当您的代码被执行时，链接没有到位，然后 addEvent 不会为它们增添趣味。您可以使用简单的 console.log 验证此断言（至少在 ff 上有 firebug）

window.addEvent('domready', function() {
     console.log($$('.jTrigger');
     $$('.jTrigger').addEvent('click', function(){alert('clicked!');})
})

你有两个选择：

• 每次创建链接时都将其添加到每个链接（对我来说有点笨拙）

• 选择一个 Dom 元素（包含它们的最小元素）并对其应用一个事件管理器：

  window.addEvent('domready', function() { document.id(document.body).addEvent('click:relay(a.jTrigger)', function(){alert('clicked!');}); })

在上面的示例中，我已将行为应用于 html 正文，因为我对您的页面一无所知，并且正文元素肯定会包含您的链接。你需要 将此行为应用于较小的子集（最小化性能问题，如文档中明确报告的那样）。

一般来说，最好委托给最近的父母 你的元素尽可能;委托给页面中的一个元素，而不是 例如，比文档正文。

参考：http://mootools.net/docs/core/Element/Element.Delegation