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

Posted 2023-02-25

【中文标题】Mootools：如何将点击功能绑定到以编程方式生成的元素

【英文标题】：Mootols:How to bind click function to programatically generated elements

【发布时间】：2012-04-14 16:01:09

【问题描述】：

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

【参考方案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
    
);

【讨论】：

那里可能存在一些语法差异...仍然无法正常工作。

这是最新版本的 mootools 的正确语法。旧版本需要来自 mootools-more 的事件委托才能正常工作。不过，我不建议添加到文档中 - 而是添加到 document.body 中。

@AlexFl：正如@Dimitar 所说，可能不要添加到document，或者最好不要添加到document.body；相反，选择所有元素都在其中的最深容器。事件委托通常应尽可能靠近元素进行（但要足够远以达到其目的）。

是的，document.body 的性能也不是很好，但它反映了 .live 实现（据我所知，它已被弃用）。这只是等效 api 的一个示例 :)

@DimitarChristoff：是的，live 已被弃用有几个原因。但请注意live 使用document，而不是document.body。 live 的当前版本是这样的：jQuery( this.context ).on( types, this.selector, data, fn ); 和 this.context 默认情况下是 document（您可以在 jQuery.fn.init 中看到这一点）。但这一切都过去了，那么高的事件委托在可以避免的情况下并不是一个好主意。 :-)

【参考方案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

【讨论】：

这些生成元素的直接父级是身体本身，但由于某种原因它仍然无法正常工作......我理解你的意思但是我缺乏 MooTools 知识

好吧，我认为它不起作用的原因是 TinyMCE，蹩脚的 joomla 编辑器会覆盖所有其他事件。 Joomla 之外的测试页面上的相同代码就像一个魅力。我在 Joomla 和测试页面中都运行 MooTools 1.4.5..