javascript - 观察 DOM 中动态插入对象的事件

Question

加载时，我在页面上的所有文本区域上添加所需的行为。

Event.observe(window, 'load', function() {
  $$('textarea').each(function(x) {
    x.observe('keydown', dosomethinghere)
  });
});

这是有效的，因为文本区域已经在 DOM 中，但是我应该如何处理页面加载后动态添加的文本区域(例如:如果我有一个显示“添加更多”的按钮)。我希望这些新创建的文本区域具有相同的行为。

Answer 1

我这样做的方法是在添加新的文本区域时观察它，如下所示:

function doSomethingWithTextAreas(){
   //do something.
}

document.observe("dom:loaded", function() {
  $$('textarea').each(function(s){
   s.observe('keydown', doSomethingWithTextareas);
  });

 $('add_more').observe('click', function(){
   textarea = new Element('textarea');
   textarea.observe('keydown', doSomethingWithTextareas); //Observes the new textarea.
   Element.insert($('textarea_container'), {bottom:textarea});
 });

});