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

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

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

这是可行的，因为textareas已经在DOM中，但是我应该如何处理在页面加载后动态添加的textarea（例如：如果我有一个显示“ Add More”的按钮）。我希望这些新创建的textareas具有相同的行为。

最佳答案

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

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});
 });

});