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

在这两个选项之后通过“update”或“insert”

添加列表

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

问题是

如何在不重复读取数组的过程中添加事件处理程序，这是因为如果您尝试在更新或插入之前添加事件，则会出现错误，因为该元素不在DOM上。< / p>

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

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。原型有类似的东西。）

Answer 2

您好我在Prototype Mail列表中发布此问题，这就是答案

您好，如果你真的想直接观察每个人li，那么你看起来非常简单明了。但在那种情况下，除非有一个非常好的理由这样做，我不会使用每个li上的处理程序;我会听取elementToUpdate的点击（或只有一个处理程序，而不是其中的ul：

    $("elementToUpdate").observe("click", function(event) { 
        var li; 
        // Find out which `li` was clicked: 
        li = event.findElement("li"); 
        if (li) { 
            // Do something with the `li` 
        } 
    }); 
Prototype 1.7 has a new feature to simplify that a bit: 
    $("elementToUpdate").on("click", "li", function(event, li) { 
        // Do something with the `li`;  note it's given as the second 
        // argument to the function 
    });

......在幕后，Prototype基本上就是在做我所做的以上。如果您仍然使用1.6（和。），您将需要第一个版本因为1.7仍然在RC1，我希望你可能是）。

HTH，

T.J。克劳德独立软件顾问 tj / crowder software / com www.crowdersoftware.com

链接是：http://groups.google.com/group/prototype-scriptaculous/browse_thread/thread/fec98641d72f6fea#

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

2 个答案:

HTH，