[AJAX] jQuery ne fonction plus quand AJAX a chargé le code HTML

Bonjour é tous,

J'ai un petit problème dont voici l'explication.
Dans mon head j'ai ceci

Code:

1
2
3
4
5
$(document).ready(function() {
	$(".submit").click(function() {
		alert($(this).attr("id"));
	});
});

Après que ma page soit chargée, j'ai un formulaire qui va afficher les donnée de la base de donnée en utilisant ajax.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
function getXhr(){
	//Création de l'objet XmlHttpRequest
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	}
	return xhr;
}
 
function get_batteries(action){
 
	//http://siddh.developpez.com/articles/ajax/
	var xhr = getXhr(); // INSTENTIEE IN js/getXhr.js
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 3){
			$('#inProgress').show();
		}
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			$('#inProgress').hide();
			$('#firstRow').show();
			$('#firstRow').siblings().remove();
			$('#firstRow').after(leselect);
		}else{
		}
	}
 
	// Ici on va voir comment faire du post
	if(action=="check"){
		xhr.open("POST","/manager/templates/naoux/xmlhttprequest/check_battery.sql.php",true);
	}else if(action=="update"){
		xhr.open("POST","/manager/templates/naoux/xmlhttprequest/update_battery.sql.php",true);
	}
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
	// ne pas oublier de poster les arguments
	// ici, l'id de l'auteur
	marque = document.getElementById('fmarque').value;
	categorie = document.getElementById('fcategorie').value;
	carburant = document.getElementById('fcarburant').value;
 
	//alert(categorie);
 
	xhr.send("marque="+marque+"&categorie="+categorie+"&carburant="+carburant);		
}

Ca fonctionne bien.

Sauf que les données affichées sont entre les balises d'un formulaire.
Pour tester, j'ai mis un formulaire en dehor de mon div#firstRow et un autre, dedans.

Code:

1
2
3
4
5
6
7
8
9
10
<form>
<input class="submit" type="button" id="2" value="Sauve1" />
</form>
 
<form>
<div id="firstRow">
<!-- Ceci est le resultat de mon ajax getXhr() -->
<input class="submit" type="button" id="3" value="Sauve2" />
</div>
</form>

Donc en résumé,
quand je clique sur "Sauve1", il m'affiche toujours "2".
Apres que ma page soit chargée, après que j'ai cliquer sur le boutton qui va afficher les données dans div#firstRow et qu'ensuite, je clique sur "sauve2", là rien ne se passe

Je pense que c'est parce que ma page a deja chargé les éléments avant que le contenu qui se trouve à l'intérieur de div#firstRow ne soit chargé.

Comment puis-je alors faire en sorte que le contenu affiché grâce à AJAX soit considéré par

Code:

1
2
3
4
5
$(document).ready(function() {
	$(".submit").click(function() {
		alert($(this).attr("id"));
	});
});

Merci pour vos lumières!!