Javascript 原型(prototype)最佳实践事件处理程序

Question

您好，这个问题更多是关于最佳实践的咨询，例如，有时当我构建完整的 ajax 应用程序时，我通常会动态添加元素。当您添加项目列表时，我会执行以下操作:

var template = new Template("<li id='list#{id}'>#{value}</li>");
var arrayTemplate = [];
arrayOfItem.each(function(item, index){
   arrayTemplate.push(template.evaluate( id : index, value : item))
});

在这两个选项之后通过“更新”或“插入”添加列表

----- $("elementToUpdate").update("<ul>" + arrayTemplate.join("") + "</ul">);

问题是

我如何在不重复读取数组的过程的情况下添加事件处理程序，这是因为如果您尝试在更新或插入之前添加一个事件，您将得到一个错误，因为该元素不在 DOM 上。

所以我现在所做的是在插入或更新之后:

arrayOfItem.each(function(item, index){
   $("list" + index).observe("click", function(){
     alert("I see the world");
   })
});

所以问题是存在更好的方法吗？？？？？

Answer 1

我不会做 $("list"+ index)。

我会考虑两种方式:

1) 让点击事件冒泡并在 $("elementToUpdate") 中捕获:

$("elementToUpdate").observe("click", function(evt){
     alert("I see the world");
});

您可以在 evt-object 中找到点击了哪个 li。

2) 不要重复$("list"+ index)，而只是

$("elementToUpdate").find("li").each(...);

(假设您使用的是 jQuery。Prototype 有类似的东西)。