Question

我有一个简单的javascript函数，当单击一个按钮时会在页面中生成一些链接。现在我想为那些生成的链接添加一个click功能。我已经为每一个添加了一个类，但它仍然无效。一切都是实时发生的，并且以下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

当你的代码被执行时，链接arn不到位，然后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正文，因为我对您的页面一无所知，并且body元素肯定会包含您的链接。你需要将此行为应用于较小的子集（最小化性能问题，如文档中明确报告的那样）。

一般来说，委托给最亲近的父母总是更好你的元素尽可能;委托给页面中的元素比例如文件正文。

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

Mootools：如何将click函数绑定到以编程方式生成的元素

2 个答案: