javascript - 将事件添加到动态生成的元素

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 可以是标准冒泡(点击、鼠标悬停/移出/leave/enter 等)或不冒泡(模糊、聚焦、改变等)。

在您的代码中:

$(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

请记住，事件委托(delegate)从 1.4 开始就在 mootools-core 中 - 在此之前它曾经在 mootools-more 中，这意味着自定义构建。