• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

addEventListener in Schleife ?

M

MalcomX

New member
Hallo erst mal ! ! !

Irgendwie bekomm ich's einfach nich mit diesen EventListener gebacken :D

Hier mal mein Code:

PHP: 
$( document ).ready(function() {
for (var i = 0; i <= 10; i++)
	document.getElementById("submit_umfrage"+i).addEventListener("click", function(){
	
		var form_data = $('#umfrage'+i).serialize();
		alert(form_data);
		
		
	});
});

EDIT: und so lass ich meine Buttons generieren

PHP: 
<button name='submit_umfrage' id='submit_umfrage".$i."' style='font-size:10px;' onClick='return false' class='btn btn-default'>Umfrage speichern</button>

Wo liegt mein Fehler ?

Gruß und euch allen ein schönes Wochenende
Malcom
 
Zuletzt bearbeitet:
Du hast hier eine Closure. Also die Variable i wird in der Funktion nicht mit dem Wert, den sie beim Erzeugen der Funktion hatte, referenziert, sondern wirklich als Variable. Somit ist i beim Klicken immer 11.
Um das zu umgehen musst du die Variable kapseln:
Code: 
$( document ).ready(function(){
	for (var i = 0; i <= 10; i++){
		document.getElementById("submit_umfrage"+i).addEventListener("click", function(i){
			return function(){
				var form_data = $('#umfrage'+i).serialize();
				alert(form_data);
			};
		}(i));
	}
});
- ungetestet.

PS: Schleifen, if, else, etc. ohne Block sind sehr gefährlich.
PPS: Wenn du schon jQuery einsetzt, warum setzt du es dann nicht für alles ein?
 
Hinweis: gerade mit jQuery brauchst du gar kein Schleifenkonstrukt. Einfach button => form => serialize(), fertig.
 
Guten Morgen und erst mal vielen Dank an euch beide !

Bekomme immer wieder in der Console Uncaught TypeError: Cannot read property 'addEventListener' of null

Ich hab gestern so einiges noch getestet und hier bekomme ich wenigstens mal schon ne Ausgabe aber das is auch nicht die Lösung, da ich dann nicht weis welcher Button geklickt wurde.

PHP: 
$( document ).ready(function() {

var items = document.getElementById('listing').getElementsByTagName('button')
console.log(items);
for( var i = 0; i < items.length; i++ ){
	console.log("CLICK");
    (function(i){
        items[i].addEventListener('click', function(event) {
            alert( i );
			console.log("CLICK");
        }, false);
    })(i);

}

Gruß
Malcom
 
Zuletzt bearbeitet:
Erst mal vielen Dank für deine Antwort ;)

Da sagt mir die Console aber was anderes oder sehe ich da was falsch ?

jswelt.png

Hier nochmal die Buttons

PHP: 
<button name='submit_umfrage' id='submit_umfrage".$i."' style='font-size:10px;' onClick='return false' class='btn btn-default'>Speichern</button>

Gruß
Malcom

- - - Aktualisiert - - -

Wobei ich noch dazu erwähnen muss, das er meinen Versuch von POST #4 nicht mal in die Schleife geht obwohl ITEMS den Wert 8 hat laut Konsole.

Versteh's einfach nicht wo es hakt. Vermut mal wie halt immer wenn was ist ........ ca. 50 cm vorm Monitor :D

Malcom
 
Zuletzt bearbeitet:
versuch’s mal komplett ohne Schleife:
Code: 
$('button').on('click', function (evt) {
    var data = $(this).closest('form').serialize();
});
 
MalcomX schrieb:
Da sagt mir die Console aber was anderes oder sehe ich da was falsch ?
Zum Vergrößern anklicken....
K.A. - das kommt darauf an, wie du die Anzeige in der Konsole erzeugt hast. this ist auf jeden Fall immer das Element, auf dem das Event ausgeöst wurde.
MalcomX schrieb:
Hier nochmal die Buttons
Zum Vergrößern anklicken....
PHP-Code ist bei einem HTML/JS-Problem ziemlich nutzlos. Zeig' doch mal den Code, der im Browser ankommt.
MalcomX schrieb:
obwohl ITEMS den Wert 8 hat
Zum Vergrößern anklicken....
?? itemsmüsste eine NodeList sein...
 
Ich weis ja nicht ob es was zu sagen hat das ich mir die Daten (also Produktliste) per Ajax generieren lasse.

@Dormilich

Danke aber auch keinerlei Reaktion

@kkaspner

Hier mal ein Screen vom Code der im Browser ankommt

js.jpg

Malcom
 
Zuletzt bearbeitet:
PHP: 
$('button').on('click', function (evt) {
    var data = $(this).closest('form').serialize();
	console.log(data);
});

Solle es doch wohl tun nicht;)
 
MalcomX schrieb:
Hier mal ein Screen vom Code der im Browser ankommt
Zum Vergrößern anklicken....
Kein Wunder, dass deine Schleife oben nicht funktioniert. Du hast ja gar keine Umfrage "0"... und auch nur 3 und nicht 11 Stück.

Aber ein Bild vom Code ist nicht die beste Methode, um ihn zu Zeite. Warum hast du keinen Testlink gemacht?
 
Ich habs ENTGÜLTIG hinbekommen :D

Hab beim Button den onClick="return false" raus und dann folgendes gemacht ;)

Was macht da ber denn bitte den Unterschied ? Ich mein wenn dann möcht ich schon verstehen was, wie und warum so ist.

PHP: 
<script>
$( document ).ready(function() {


window.addEventListener ('submit', function (evt) {
 
	evt.preventDefault();
	var items = document.getElementsByName("submit_umfrage");
	for( var i = 0; i < items.length; i++ ){
	//console.log("CLICK");
	(function(i){
		items[i].addEventListener('click', function(event) {
			//alert( i );
			var check = document.getElementById("submit_umfrage"+i);
			console.log(check);
		}, false);
	})(i);
	}

  
});
});
</script>

Trotzdem nochmal vielen Dank für eure Bemühungen

Malcom
 
Wo kommt denn plötzlich der Eventlistener auf "submit" her? Der ändert die Situation natürlich, erzeugt dein Problem mit dem return false;... und ist auch ziemlich sicher falsch.
 
Öhm warum falsch ? Ich möchte ja eben keinen Site Reload weil die Daten weiterverarbeitet werden sollen per Ajax ;)

Den preventDefault habe ich eben ersetzt mit den vorhergehenden return false;

Malcom

- - - Aktualisiert - - -

Also mein derzeitiger Stand ist folgender !

Es funktioniert alles in soweit das per Ajax auch die Daten in die DB geschrieben werden jedoch erfolgt dies pro Click immer *1

Ich dacht mir es liegt daran das die Event Listeners immer erneut hinzugefügt werden und hab Sie deshalb in eine function() gepackt, aber dem scheint nicht so zu sein.

Soweit bin ich bis jetzt:

PHP: 
$( document ).ready(function() {

function list_form(){
	var prod = document.getElementsByName("prod_pos_form");
	console.log(prod);
	for( var i = 0; i < prod.length; i++ ){

	(function(i){
		prod[i].addEventListener('click', function(event) {
			event.preventDefault();
			//var check = document.getElementById("submit_wk"+i);
			//var data = $(this).closest('form').serialize();
    		//console.log(data);
		}, false);
	})(i);
	}
}


function listeners(){
var items = document.getElementsByName("submit_wk");
	console.log(items);
	for( var i = 0; i < items.length; i++ ){

	(function(i){
		items[i].addEventListener('click', function(event) {
			  $('button').on('click', function () {
			  console.log("click");
			  var data = $(this).closest('form').serialize();
			  console.log(data);
			  $.ajax({
				  type: "POST",
				  url: "core/ajax/ajax_insert_wk.php",
				  data: data,
				  success: function(content) {
					  //document.getElementById("listing").innerHTML = content;
					  //$('#listing').addClass('animated pulse');
					  console.log("rückgabe"+content);
					  //this.removeEventListener('click', listener, false);
					  
				}
			  });
			  });	
		}, false);
	})(i);
	}
}

$( "#vorspeisen").click(function() {
				
				$.ajax({
				type: "POST",
				url: "core/ajax/ajax.php",
				data: 'choose=kalt_vor%',
				success: function(content) {
					document.getElementById("listing").innerHTML = content;
					list_form();
					listeners();
			  }
			  });
});

});

Gruß
Malcom
 
MalcomX schrieb:
Öhm warum falsch ?
Zum Vergrößern anklicken....
dass du ev.preventDefault() aufrufst, ist nicht falsch, aber du willst ja nicht erst beim Submit-Event die Click-Eventlistener registrieren. Außerdem willst du diese ja auch nur ein einziges Mal registrieren und nicht immer wieder einen.

MalcomX schrieb:
Es funktioniert alles in soweit das per Ajax auch die Daten in die DB geschrieben werden jedoch erfolgt dies pro Click immer *1
Zum Vergrößern anklicken....
Genau das meine ich. Und auch hier hast du das Problem, dass du immer mehr Listener registrierst. Das willst du nur ein einziges mal direkt im .ready() machen.
 
Also registrieren tu ich Sie ja im document ready

Das meintest Du doch mit .ready() oder ?

Malcom

- - - Aktualisiert - - -

Guten Morgen erst mal ! ! !

Also ich hab's jetzt hinbekommen. Jedoch versteh ich einfach die Funktionsweise von JS nicht so ganz.

Hier mal mein Code:

PHP: 
function list_form(){
	var prod = document.getElementsByName("prod_pos_form");
	//console.log(prod);
	for( var i = 0; i < prod.length; i++ ){

	(function(i){
		prod[i].addEventListener('click', function(event) {
			event.preventDefault();
			//var check = document.getElementById("submit_wk"+i);
			//var data = $(this).closest('form').serialize();
    		//console.log(data);
		}, false);
	})(i);
	}
}


function listeners(){
var items = document.getElementsByName("submit_wk");
	//console.log(items);
	for( var i = 0; i < items.length; i++ ){

	(function(i){
		items[i].addEventListener('click', function(event) {
			  
		}, false);
	})(i);
	}
	
	var butts = document.getElementsByName("submit_wk");
	console.log(butts.length);
	for( var i = 0; i < butts.length; i++ ){
	console.log("for");
	$('#submit_wk'+i).on('click', function () {
				  console.log("click");
				  var data = $(this).closest('form').serialize();
				  console.log(data);
				  $.ajax({
					  type: "POST",
					  url: "core/ajax/ajax_insert_wk.php",
					  data: data,
					  success: function(content) {
						  $("#basket_add").modal();
						  var umfrage_close_anim_end = setTimeout(function(){
							  $("#basket_add").modal("hide");
						  }, 1000);
						  
						  //document.getElementById("listing").innerHTML = content;
						  //$('#listing').addClass('animated pulse');
						  console.log("rückgabe"+content);
						  //this.removeEventListener('click', listener, false);
						  
					}
				  });
				  });	
	
	}

}

Was ich daran einfach nicht verstehe ist folgendes. Ich führe die beiden Funktionen wo ich die Event Listeners erstelle immer aus wenn eine Produktkategorie im Menü ausgewählt wird.

Quasi so hier:

PHP: 
$( "#vorspeisen").click(function() {
				
				$.ajax({
				type: "POST",
				url: "core/ajax/ajax.php",
				data: 'choose=kalt_vor%',
				success: function(content) {
					document.getElementById("listing").innerHTML = content;
					list_form();
					listeners();
			  }
			  });
});

Jetzt müsste es doch aber so sein das wen ich wie folgt vorgehe:

Auswahl Menüpunkt 1 ----> list_form(); listeners();
Auswahl Menüpunkt 2 ----> list_form(); listeners();
Auswahl Menüpunkt 3 ----> list_form(); listeners();
Auswahl Menüpunkt 4 ----> list_form(); listeners();

...... wieder die Event Listeners doppelt erstellt werden oder nicht ? Also wie gemeint funktioniert alles perfekt. Aber ich möcht es halt verstehen das ganze ;)

Gruß und Danke nochmal an euch
Malcom
 
Jetzt sollte es passen, wenn alle Elemente mit dem Namen "submit_wk" in dem #listing sind.

Wobei du in der listeners() einen Eventlistener registrierst, der gar nichts tut... und der in list_form() ist ungünstig: wenn du verhinder willst, dass das Formular abgesendet wird, solltest du im submit-Event das ev.preventDefault() aufrufen. So, wie du es hast, kann das Formular z.B. noch durch das Drücken von Enter abgesendet werden. Außerdem ist so im Code klarer, was du eigentlich wirklich willst.

Außerdem ist immer noch die Frage, warum du jQuery nicht überall benutzt...
...zusätzlich könntest du dir das dauernde registrieren von Listenern sparen, wenn du Eventdelegation verwenden würdest.
 
Also läuft in alles soweit problemlos. JQuery wird jetzt auch vollständig genutzt bzw. die paar Tipps von Dir bau ich noch um. Wo ich jetzt eh schon alles umstrick, soll auch diesmal alles so gut als nur möglich passen.

Ich hab aber schon wieder ein neues kleines Problemchen aber is ein anderes Thema und mach somit mal nen neuen Thread auf.

Nochmals recht herzlichsten Dank ;) Macht nen klasse Job hier und so langsam machts Spass mit JS. Hatte mich zwar die ganzen Jahre dagegen gesträubt aber ja irgendwo muss man ja wenns passen soll ;)

Malcom
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben