Javascript Prototype prototype event handlers

Question

Hi, this question is more likely to be advice on best practice. Sometimes, when I create a full ajax application, I usually add elements dynamically, for example. When you add a list of elements, I do something like:

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

after these two options add the list via "update" or "paste"

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

question

how can I add an event handler without repeating the process of reading the array, because if you try to add an event before updating or pasting, you will receive an error message because the element is not yet in the DOM.

so what i am doing so far after insert or update:

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

so the question is, is there a better way to do this ??????

Answer 1

, Prototype Mail,

, li , . , , li; ToUpdate ( 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 given as the second 
        // argument to the function 
    }); 

... , Prototype , . , 1.6 ( 1.7 RC1, , , , ).

,

T.J. Crowder tj/crowder/com www.crowdersoftware.com

: http://groups.google.com/group/prototype-scriptaculous/browse_thread/thread/fec98641d72f6fea#

Answer 2

$("list" + index).

:

1) - $( "elementToUpdate" ):

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

, evt-.

2) $("list" + index),

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

(, jQuery. - ).