0

我有一个普通的 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。

4

2 回答 2

1

MooTools 也支持事件委托。这是文档中的示例：

// 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
    }
});
于 2012-04-14T16:04:50.603 回答
0

当您的代码被执行时，链接没有到位，然后 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

于 2012-04-14T16:16:00.000 回答