javascript - statement - Añadir método onclick utilizando for loop

loop object javascript

Question

Estoy agregando eventos clickclick a elementos que estoy creando dinámicamente. Estoy usando el código a continuación, esta es la parte importante solamente.

Test.prototype.Show= function (contents) {
for (i = 0; i <= contents.length - 1; i++) {
var menulink = document.createElement(''a'');
menulink.href = "javascript:;";
menulink.onclick = function () { return that.ClickContent.apply(that, [contents[i]]); };
}
}

Primero dice que no está definido. Luego cambié y agregué:

var content = content[i];
menulink.onclick = function () { return that.ClickContent.apply(that, [content]); };

Lo que sucede ahora es que siempre agrega el último elemento a todos los eventos onclick (elementos aka). ¿Qué estoy haciendo mal aquí?

Answer 1

Es un problema clásico. Cuando se llama a la devolución de llamada, el ciclo finaliza, por lo que el valor de i es content.length .

Use esto por ejemplo:

Test.prototype.Show= function (contents) {
for (var i = 0; i < contents.length; i++) { // no need to have <= and -1
(function(i){ // creates a new variable i
var menulink = document.createElement(''a'');
menulink.href = "javascript:;";
menulink.onclick = function () { return that.ClickContent.apply(that, [contents[i]]); };
})(i);
}
}

Esta función llamada inmediatamente crea un alcance para una nueva variable i , cuyo valor está así protegido.

Mejor aún, separe el código que hace que el controlador se convierta en una función, tanto para mayor claridad como para evitar crear y descartar innecesariamente las funciones del constructor:

Test.prototype.Show = function (contents) {
for (var i = 0; i <= contents.length - 1; i++) {
var menulink = document.createElement(''a'');
menulink.href = "javascript:;";
menulink.onclick = makeHandler(i);
}
function makeHandler(index) {
return function () {
return that.ClickContent.apply(that, [contents[index]]);
};
}
};

Una forma de evitar este problema por completo, si no necesita compatibilidad con IE8 , es introducir un alcance con forEach , en lugar de utilizar un bucle for :

Test.prototype.Show = function (contents) {
contents.forEach(function(content) {
var menulink = document.createElement(''a'');
menulink.href = "javascript:;";
menulink.onclick = function() {
return that.ClickContent.call(that, content);
};
});
}