如何向刚刚创建的元素添加事件？

Question

如何将事件（通过Mootools）添加到刚刚通过set("html")创建并通过DOM插入的元素中？

$(document).addEvent("domready", function(){
      $(someel).set("html", "<p class='someclass'></p>");
      $$("someclass").somefn("click", function(){...});//somefn: that add the "click" event to the <p> element

});

Answer 1

所以通过事件委托，在最上面的元素中添加一个事件：

document.addEvent("domready", function(){
    $('foo').addEvents({
        'click:relay(p.someclass)': function(){
            alert('very well');
        }
    }).set("html", "<p class='someclass'>click me</p>");
});

或像这样链接它，将事件直接添加到所有元素：

document.addEvent("domready", function(){
    $('foo').set("html", "<p class='someclass'>click me</p>")
        .getElements('.someclass').addEvent('click', function(){
            alert('chained');
        });
});

方法1更具性能，并且无需重新绑定即可添加/删除或匹配元素。

Answer 2

您应该使用Element constructor。代码示例可能像这样：

$(document).addEvent("domready", function () {
    var pElement = new Element('p', {           // create a new element
        'class': 'someclass',                     // give it a class
        'html': 'Click me to make me alive...'  // give it some HTML
    });

    $('someel').adopt(pElement);                // have someone adopt it
    pElement.addEvent("click", function () {    // add event to it here OR in the Element constructor
        alert('Hello world!'); 
    });
});

Example