Dynamically creating onclick events in for loop - All onclick events use last element in for loop list

Question

I have a for loop that loops through a list of messages. I'm trying to create a link for each message that has an onclick function that passes on some message properties to a popup:

for (var k = 0; k < messages.length; k++) {
                var message = messages[k];
                var lnkMessage = dojo.create("a", { innerHTML: FormatLogMessage(message.Message), className: "pointer", title: "View Message Info" }, divMessageBody);
                //lnkMessage.href = "javascript:ShowLogPopup('" + message.LogTimeFormatted + "', '" + message.Message + "')";
                dojo.connect(lnkMessage, 'onclick', this,
                    function() { this.ShowLogPopup(message.LogTimeFormatted, message.Message); }
                );
            }

The issue is that using this method with dojo.connect, the ShowLogPopup message popups always get passed the properties from the last message in the list. Any ideas on how I can get it to pass in the appropriate properties?

Answer 1

Try to use dojo.hitch() instead of your function:

dojo.connect(lnkMessage, 'onclick', this,
     dojo.hitch(this,"ShowLogPopup",message.LogTimeFormatted, message.Message)
            );