PHP Forum - problem mit dynamisch gesetzten eventlistenern

PHP Forum (http://www.selfphp.de/forum/index.php)

- HTML, CSS und JavaScript Help! (http://www.selfphp.de/forum/forumdisplay.php?f=24)

- - problem mit dynamisch gesetzten eventlistenern (http://www.selfphp.de/forum/showthread.php?t=23583)

problem mit dynamisch gesetzten eventlistenern

folgendes ist ein stark vereinfachtes script das mein problem vollständig wiederspiegelt:

PHP-Code:


		
			
<html><head><title></title></head><body><div id="div"></div></body><script>

var list = new Array(1,2,3,4,5);

for (var i in list){

    document.getElementById('div').innerHTML += '<a id="'+list[i]+'" href="'+list[i]+'.txt">'+list[i]+'</a><br>\n';

    document.getElementById(list[i]).addEventListener("click",function(e){alert(list[i]);},false);

}

</script></html>

mein problem ist, dass nur beim 5. link der gewünschte effekt eintritt

und ich kann mir nach anderthalb stunden gefummel ausprobieren fehlersuchen und kaffe trinken immernochnicht erklären wieso es nicht funktioniert...

P.S. bevor jemand mit mach doch einfach <a href="javascript: xy-code "> oder <a onclick="xy-code"> anfängt... im enddefekt geht es drum drag events zu catchen und ein anderes event zu triggern das hier ist nur ein vereinfachtes script um mein problem zu demonstrieren

getestet und alles hab ich mit einem aktuellem chrome (6.0.472.55) und einem aktuellem firefox (3.6.8)

das script gibts auch hier zum ausprobieren (solange bis ich das problem gelöst habe) oder halt im anhang

AW: problem mit dynamisch gesetzten eventlistenern

ja... ich weiß zumindest warums nicht geht... er versucht die funktion erst beim event zu initialisieren ... zu dem zeitpunkt ist i allerdings nichtmehr gültig... warum es bei dem 5. element trotzdem geht ist mir allerdings ein rätsel

wie ich es lösen soll um diese uhrzeit allerdings auch

AW: problem mit dynamisch gesetzten eventlistenern

selbst closures helfen mir nicht weiter (oder ich bin zu blöd es korrekt anzuwenden)

PHP-Code:


		
			
<html><head><title></title></head><body><div id="div"></div></body><script>

var list = new Array(1,2,3,4,5);

for (var i in list){

    document.getElementById('div').innerHTML += '<a id="'+list[i]+'" href="'+list[i]+'.txt">'+list[i]+'</a><br>\n';

    document.getElementById(list[i]).addEventListener("click",

        function(){

            return function(j){

                alert(list[j]);

            }(i);

        }

    ,false);

}

</script></html>

bzw:

PHP-Code:


		
			
<html><head><title></title></head><body><div id="div"></div></body><script>

var list = new Array(1,2,3,4,5);

for (var i in list){

    document.getElementById('div').innerHTML += '<a id="'+list[i]+'" href="'+list[i]+'.txt">'+list[i]+'</a><br>\n';

    document.getElementById(list[i]).addEventListener("click",

        function(){

            return function(j){

                alert(j);

            }(list(i));

        }

    ,false);

}

</script></html>

haben absolut keinen mehrwert :(

AW: problem mit dynamisch gesetzten eventlistenern

Ich habe eine Lösung gefunden:

PHP-Code:


		
			
<html><head><title></title></head><body><div id="div"></div></body><script> 

var list = new Array(1,2,3,4,5); 

for (var i in list){ 

    document.getElementById('div').innerHTML += '<a id="'+list[i]+'" href="'+list[i]+'.txt">'+list[i]+'</a><br>\n'; 

}

for (var i in list){

    (function(n){

        document.getElementById(list[n]).addEventListener("click",function(e){alert(list[n]);},false); 

    })(i);

}

</script></html>

aber wenn mir jemand sagen kann warum es nur mit getrennter zählschleife + closure funktioniert währe ich dankbar...