✔ Nach .hmtl geht kein jquery mehr

P

praktikant81

Mitglied
Hi bin neu was jquery und ich komme einfach nicht drauf was ich falsch mache!

Habe mir auch schon die Finger Wunde gegooglet find aber keine Antwort! :(

hier mal der Code

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" >
	<title>test</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
$(document).ready(function() {
				
	$('#bla').click( function(){ alert("bla geht")});

	$('#blubb').click( function(){ alert("blubb geht");});
	
	$('#laden').click( function(){
				$.post('test1.html',{},
				function(daten){
					$('#rest').html(daten);
					});
	});
});
function neuesT(msg) {
	alert(msg);
}

</script>
</head>
<body>
    <div id="seite">
        <div id="header">
            <h3>Hier ist der Header</h3>
            <input id="laden" type="button" value="Laden" />
            <br />
			<br />
			<br />

            <input id="blubb" type="button" value="+" onclick="neuesT('hallo');" />
        </div>
        <div id="rest">
        	<input id="bla" type="button" value="+" onclick="neuesT('hallo');" />
        </div>
   	</div>
</body>
</html>

bevor man jetzt auf den Button "Laden" drückt reagieren die beiden Button auf das Onclick und auch auf jquery.

Jetzt Lade ich die Seite in das Div "rest"
HTML: 
<input type="button" id="bla" value="neu" onclick="neuesT('neu');" />

und jetzt geht nur noch der Onclick-Event und nicht mehr der jquery!

Bei dem "alten" Button der nicht neu geladen worden ist geht alles noch.

Ich vermute mal das es daran liegt das es sich bei dem Jquery um eine Callback Funktion handelt. Und sozusagen der neu geladene Teil sich nicht in der Funktion befindet!?

Wie bekomme ich das aber hin das es geht?

Danke schon mal im vorraus******************************!
 
Zuletzt bearbeitet:
Eine ID darf nur exakt einmal vorkommen. Dass alleine würde schon die korrekte Funktion deines Skript verhindern.

Wenn du $('#bla') schreibst, dann bekommst du nur Elemente, die zu diesem Zeitpunkt auch da sind. Dein anderes Element kommt aber erst später.

Also entweder musst du nach dem Laden des Inhalts von "rest" nochmal die Elemente auswählen und die Event Handler binden oder du verwendest http://api.jquery.com/on/ so dass du auch alle zukünftigen Elemente erreichst.

Javascript: 
//Click handler für alle Elemente mit der Klasse "bla" für jetzt und für die Zukunft
$(document).on('click', '.bla', function() {

});
 
Mh ok so richtig verstehe ich das noch nicht, aber jetzt ist es auch zu spät dafür ;)
Das mit den IDs ist mir schon klar, das diese nur einmal vorkommen darf. Aber überschreibe ich nicht den einen Button mit der ID bla mit dem andern Button bla, so das diese ID nur einmal vorhanden ist? Oder verstehe ich da was falsch?
 
ja stimmt. Aber trotzdem handelt es sich dabei dann um ein anderes Objekt im Dokument, welches du erneut bearbeiten musst.

Javascript: 
$('#laden').click( function(){
    $.post('test1.html',{},
    function(daten){
        $('#rest').html(daten).find('#bla').click(function() {
            alert('Neu geht!');
        });
    });
});
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück