jquery .post data Problem

[_spaddel_]

Habe ein kleines Problem und komme irgendwie überhaupt nicht dahinter.

Es gibt sowas bei mir:

<input type="text" name="atnr[]" class="atnr" size="10" id="1">

Wenn man in diesem Textfeld ist und z.B. F2 drück, wird ein hidden div eingeblendet:

$("input.atnr").keydown(function(e){
	var artikel_pos = $(this).attr('id');
	if(e.keyCode === 113) {
        ...
        ...

Funktioniert auch wunderbar.
Auch wenn ich den html code mehrmals einfüge, wird jedes mal das div eingeblendet.
Aber es soll anders gehen. Durch das drücken von F10 gibt es ein .post an eine php datei, welche dann u.a. den html code zurückgibt, welcher dann per .append in die Seite eingebunden wird.

$("input.atnr").keydown(function(e){
	if(e.keyCode === 121){
		$.get("offer_article_row.php",{
			"action":"add"
		},
		function(data){
			$("#table_article").append(data);
		});
		return false;
	}
});

Doch wenn ich dort dann F2 drücke passiert gar nichts, nur ich weiß nicht warum.
Also nicht nur das mit F2 funktioniert dort nicht, sondern gar keine javascript Sachen.
Erst wenn ich in der php Datei die .js Datei nochmal einbinde, funktioniert es.
Aber das ist ja nicht Sinn der Sache.

Also zum Schluss sieht es dann so aus:

// Normal in den Quelltext geschrieben - alles funktioniert
<input type="text" name="atnr[]" class="atnr" size="10" id="1">

// Mit .post und .append hinzugefügt - kein javascript geht
<input type="text" name="atnr[]" class="atnr" size="10" id="2">

Weiß jemand Rat bzw. hat das jemand verstanden was ich meine?

 

[erik s.]

Deinen Event-Handler definierst du ja sicherlich innerhalb der $(document).ready()-Funktion. Diese wird aufgerufen, sobald das Dokument fertig geladen ist (ist glaube ich auch ganz gut aus dem Namen abzuleiten). Wenn du jetzt per AJAX weiteren HTML-Code nachlädst, dessen Elemente teilweise auch auf Events reagieren sollen, müssen die Handler entsprechend auch erst zugeordnet werden. Die ready()-Funktion des aufrufenden Dokumentes ist bis dahin allerdings schon (lange) fertig durchlaufen. Also macht es schon Sinn, dass die JS-Datei im AJAX-File ebenfalls geladen werden muss.

 

[_spaddel_]

Das Problem dann ist allerdings, das dann events mehrfach ausgeführt werden.
Funktionieren tut es zwar dann, es kommt allerdings durch das mehrfache ausführen zu Fehlern.

Hier zum Beispiel.
Wie oben beschrieben, wird durch F10 ein .post durchgeführt und die Rückgabe in die Seite eingebunden. Wenn in der Rückgabe das Script nun auch eingebunden ist, wird beim erneuten Drücken von F10 nicht mehr nur 1 .post ausgeführt, sondern 2-mal. Danach dann 4-mal und so weiter.

 

[erik s.]

Jap, das ist das altbekannte AJAX-Problem, das unweigerlich auftritt, wenn man asynchron arbeitet.
Abhilfe:

$('input.atnr').live('keydown', function(e)  { ... });

Ich sehe gerade, dass .live() mittlerweile deprecated ist. Alternativ sollte man .delegate() verwenden.

 

[_spaddel_]

Statt .delegate() soll man .on() verwenden, sehe ich das richtig?

Leider klappt das damit auch nicht.

$("body").on("keydown",function(event){
		if(event.keyCode === 121){
			$.get("offer_article_row.php",{
				"action":"add"
			},
			function(data){
				$("#table_article").append(data);
			});
			return false;
		}
	});

In der PHP Datei wird dann das script mit eingebunden:

<script type="text/javascript" src="js/script.js"></script>

Und beim erneuten drücken von F10 wird die .get Abfrage öfter durchgeführt.

 

[erik s.]

Wenn du's mit .delegate() machst, wird es funktionieren. Und diese Funktion ist (noch) nicht als deprecated beschrieben, kann also durchaus verwendet werden.
.on() ist anscheinend ähnlich zu .bind()

 

[_spaddel_]

Leider nicht.

$("body").delegate("*","keydown",function(event){
		if(event.keyCode === 121){
			$.get("offer_article_row.php",{
				"action":"add"
			},
			function(data){
				$("#table_article").append(data);
			});
			return false;
		}
	});

Wird weiterhin öfter ausgeführt. Oder hab ich was falsch gemacht?

 

[erik s.]

Mit .delegate() brauchst du die zur Laufzeit erzeugten Elemente nicht extra zu binden. Das passiert automatisch. Quasi äquivalent zur .live()-Funktion.

 

[_spaddel_]

Sorry stehe auf dem Schlauch. Wenn ich die Einbindung des scripts in der php Datei wieder raus nehme, reagieren die hinzugefügten Elemente wieder auf keine anderen Funktionen.

 

[erik s.]

$("body").delegate("input.atnr","keydown",function(event){
    if(event.keyCode == 121){
        $.get("offer_article_row.php",{
            "action":"add"
        },
        function(data){
            $("#table_article").append(data);
        });
        return false;
    }
});

funktioniert nicht?
Ich habe es ähnlich nachgebaut und bei mir klappt alles ...