如何在MooTools上实现jQuery的live绑定事件？

Question

如何使通过ajax加载的元素，采用与MooTools 1.11中相同类别关联的事件？

据我所知，在jQquery中，如果您的ajax响应包含像<div class='button'>这样的内容，如果使用live绑定到$('.button')的事件，那些事件将自动绑定。

MooTools 1.11是否也支持这种方式？

- lock

---

已清理语法，添加了“live”的参考，并添加了JavaScript标签。 - artlung

嗨，Lock。你在1.11中成功了吗？ - denormalizer

抱歉回复晚了。无论如何，是的，我成功地让它工作了，尽管我不能提供一个链接到我使用它的网站，因为它的域名/托管已经过期了。我可以提供一个代码片段，但它几乎与被接受的答案相似，只是当然是针对1.11编写的。这里是一个链接：http://pastebin.com/HZ4cDLU6 - lock

哎呀，这是正确的链接：http://pastebin.com/FP51K91F。 - lock

Answer 1

也许像这样的东西可以达到您想要的效果？但我不确定它是否适用于1.11版本。

Element.implement({
    addLiveEvent: function(event, selector, fn){
        this.addEvent(event, function(e){
            var t = $(e.target);

            if (!t.match(selector)) return false;
                fn.apply(t, [e]);
        }.bindWithEvent(this, selector, fn));
    }
});

$(document.body).addLiveEvent('click', 'a', function(e){ alert('This is a live event'); });

- anomareh

---

根据这段代码，如果不匹配选择器，return false; 将阻止默认事件（即点击）的触发。建议进行以下修改：if (t.match(selector))fn.apply(t, [e]);但仍不完美，因为会向元素绑定一个无效的额外事件。 - Brian Hogg

@DimitarChristoff 你有认真阅读问题吗？你提供了v1.4.2文档的链接。 - anomareh

哦，抱歉。支持一个四年以上的框架有时会让我忘记一些东西。公平地说，在尝试使用1.11版本时，缺乏事件委托可能是最不重要的问题之一... - Dimitar Christoff

@DimitarChristoff，尽管如此，公平地说，这与这个问题有什么关系呢？ :/ 您可能还注意到，这个问题（和答案）已经接近2年了。 - anomareh

它被链接到一个新问题作为“已经回答”，因此我偶然发现它，我并不是经常挖掘坟墓或其他什么的。 - Dimitar Christoff

Answer 2

您可以使用以下方式：

$(document.body).addEvent('click:relay(.filterButton)', function(){
// do something
});

- Idealmind

Answer 3

anomareh 正在正确的轨道上。

您还需要检查事件目标的祖先元素。

我不确定这是否适用于所有事件，因为其中一些事件不会冒泡（不确定 Mootools 如何处理此类情况）。

- Sean Hogan

---

我认为 document.body 是整个文档，对吗？ - Teej

这是正确的，但不相关，因为 anomareh 的代码只检查事件目标是否与选择器匹配，而 jQuery 的 live() 还会检查事件目标的祖先元素。 - Sean Hogan

Answer 4

这是一个非常酷的想法，jQuery .live() 的工作方式类似，但是在冒泡方面也存在问题。 如果某个父元素为此事件附加了stopPropagation()，则什么都不会发生。

我认为理想的解决方案是构建自定义事件，这里有一篇关于自定义事件的非常好的文章，作者是Nicholas Zakas：

http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/

但是这个例子还没有实现事件冒泡。一些具有防止其发生的回退机制的冒泡方式应该可以解决问题。

- Brankodd