Generierte Elemente nicht klickbar

H

HoPi

Mitglied
Moin,
ich bin gerade auf ein Skript-Schnipsel gestoßen, das einen Button per AJAX generiert. Dieser reagiert jedoch erst auf einen 2. Mausklick (FF, IE). Kann mir jemand erklären, warum?

Code: 
<?php

if(isset($_GET['param'])) {
	echo "<button type=\"button\" onClick=\"alert('gedr&uuml;ckt');\">". $_GET['param'] ."</button><br />\n";
} else {

?>
<html>
	<head>
		<title>Ajax-Test</title>

		<script type="text/javascript">

		var http_request = false;
	 
	    function ajaxCall(param){
	        http_request = false;
	        if (window.XMLHttpRequest) { // Mozilla, Safari,...
	            http_request = new XMLHttpRequest();
	            if (http_request.overrideMimeType) {
	                http_request.overrideMimeType('text/xml');
	            }
	        } else if (window.ActiveXObject) { // IE
	            try {
	                http_request = new ActiveXObject("Msxml2.XMLHTTP");
	            } catch (e) {
	                try {
	                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
	                } catch (e) {}
	            }
	        }
	        if (!http_request) {
	            alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
	            return false;
	        }
	        http_request.onreadystatechange = ajaxCallback;
	        http_request.open('GET', 'ajaxtest.php?param='+param, true);
	        http_request.send(null);
	    }
	 
	    function ajaxCallback() {
	        if (http_request.readyState == 4) {
	              var answer = http_request.responseText;
	              document.getElementById("filter_test_results").innerHTML = answer;
	        } 
	    }
		</script>

	</head>
	<body>

		<h2>Ajax-Test</h2>
			<table>
				<tr>
					<td>was eingeben</td>
					<td>
						<input id="input_text" type="text" name="input_text" size="30" maxlength="40" onKeyUp="ajaxCall(this.value);" onChange="ajaxCall(this.value);" />
					</td>
				</tr>
			</table>

		<div id="filter_test_results">
			hier kommt gleich was
		</div>

	</body>
</html>
<?php

}

?>

Danke im Voraus :)
 
Entferne mal den Aufruf für den onchange-Event.

Warum: wenn du direkt vom input weggehst und auf den Button klickst, feuert dieser Event in dem Moment, wo du auf den Button klickst...der Button wird also in dem Moment neu erzeugt, was das Problem verursacht.
 
Wie reagiere ich denn zusätzlich am sinnvollsten auf Änderungen der Eingaben durch die Maus (copy'n paste)?
 
Zuletzt bearbeitet:
Im IE gibts dafür den Event "onpaste".

Eine Variante, die dir in dem speziellen Fall browserübergreifend weiterhelfen könnte wäre jene:
Lasse die Überwachung von "onchange" drinnen.
Wenn du den Request startest, disable den Button(sofern er schon vorhanden ist).
Hast du die Antwort bekommen und der Button wurde aktualisiert...dann aktiviere ihn wieder.

Zusätzlich könntest du den Wert des Inputs beim onkeyup noch in einer Variablen speichern, und das Ganze beim onchange nur machen, wenn Variablenwert und aktueller Wert nicht übereinstimmen...das spart die eine Serveranfrage, sofern nicht "gepastet" wurde.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück