向動態生成的元素添加事件

Question

如何向由 AJAX 加載的元素添加事件。

jQuery 有live ，但 Mootools 的等價物是什么？

例如：

window.addEvent('domready', function() {
    // some code which loads new elements by ajax

    // Filter
    $$('.filterButton').addEvent('click', function(event) {
        alert('wow');
    });
});

Answer 1

mootools 等效項是通過delegatorElement.addEvent("event:relay(mask)", fn); 其中event可以是標准冒泡（單擊、鼠標懸停/退出/離開/進入等）或非冒泡（模糊、焦點、更改等）。

在您的代碼中，如下所示：

$(document.body).addEvent("click:relay(.filterButton)", function(event, element) {
    console.log(event, element === this); // event obj, true
});

最好將事件添加到 dom 更高的元素中，例如document.id("delegatorId")

更多在這里：

http://mootools.net/docs/core/Element/Element.Delegation

請記住，自 1.4 以來，事件委托在 mootools-core 中 - 在此之前它曾經在 mootools-more 中，這意味着自定義構建。