Why are my event handlers receiving values from the last loop iteration in dynamically created elements?

Variable References in Event Handlers and Closures

In this scenario, you are dynamically creating elements with event handlers within a loop. Initially, the intent is to pass distinct values to the event handler based on the loop iteration. However, it appears that the event handler is receiving the values from the last loop iteration, suggesting a scoping issue.

Indeed, the concern of the code lies in the use of anonymous functions as event handlers within the loop. As you correctly suspect, the event handler functions are closures that refer to the variables within the loop. By the time the event fires, the loop has completed, and the referenced variables hold the final values assigned in the last iteration.

Implementing a Closure

To resolve this issue and properly pass the intended values to the event handler, you need to implement a closure that captures the variables at the time of loop execution. By doing so, each event handler will have its own reference to the specific values it needs.

The following revised code incorporates the closure by wrapping the event handler function within another anonymous function that immediately invokes (also known as an IIFE, or Immediately Invoked Function Expression):

for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function(s, c, a)
    {
        return function()
        {
            onStatusChanged(s, c, a);
        }
    }(select, callid, anotherid);
    td.appendChild(select);
}

In this modified code, the inner IIFE returns the actual event handler function while taking in the necessary parameters (select, callid, anotherid), which are passed in from the loop. By capturing these values at the time of loop execution, you effectively create a separate scope for each event handler.

This technique ensures that each event handler has its own reference to the values it needs when the event occurs, resolving the issue of improper value referencing.

The above is the detailed content of Why are my event handlers receiving values from the last loop iteration in dynamically created elements?. For more information, please follow other related articles on the PHP Chinese website!