exécution javascript après appel ajax

**Gaani** · 09/09/2009, 17h32

Bonjour,

j'espère ne pas me tromper en mettant le sujet ici, je ne sais pas si mon problème est spécifique à jquery, mais comme c'est la bibliothèque que j'utilise...

Alors voilà, je développe un site qui utilise jquery, j'indique donc dans ma première page pas mal de balise <script> pour charger les éléments nécessaires.

Pour cette page, j'ai une div #content qui va contenir les données appelées après une requête faite avec la fonction ajax de jquery. Là dedans ce trouve des div qui normalement sont relier à un évènement click qui est présent dans un des fichiers js chargés au début.

Seulement rien ne se passe. J'ai donc mené ma petite enquête, et si je met une balise <script> dans le contenu de la page que j'appelle en ajax, le contenu de ce script s'exécute bien pour la partie chargée. Mais je perd l'intérêt de faire mes petits librairies js à charger dès le début.

C'est peut-être un problème classique, mais je n'ai pas trouvé de solution, et pourtant je pense avoir pas mal cherché...

Si quelqu'un avait une solution pour moi...

Merci d'avance

**Bovino** · 09/09/2009, 20h28

Salut,
C'est effectivement un grand classique

Ce qui se passe, c'est que contrairement aux CSS, les événements JavaScript ne sont pas affectés à un type d'éléments mais à des objets. Donc si tu remplaces ou ajoutes un objet, le comportement ne lui a pas été affecté.
Comme solution, jQuery a prévu dans sa dernière version (1.3) une fonction live() qui permet de faire ce que tu souhaites.

**Gaani** · 09/09/2009, 22h48

Je te remercie infiniment pour ton aide, ça m'évite d'avoir à complètement repenser ma façon de faire.

**kinhelios** · 21/09/2009, 16h56

Bonjour,

Je me permets de ré-ouvrir cette discussion car mon soucis, que je pensais résolu avec cette fonction "live" de JQuery, persiste car je ne fais pas appel à l'un des évènements autorisés de "live".

Je vais faire un résumé de la situation pour quiconque serait dans le même cas.
J'ai mon code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<html>
<head>	
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/mon_js_a_moi.js"></script>
</head>
 
<body>
	<div id="zone_ajax"></div>
</body>
</html>

Dans la "zone_ajax" que je charge dynamiquement, il y a formulaire avec un champ de saisie texte, du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<form name="formsearch" id="formsearch" method="get" action="my_url.php">
<fieldset>
	<legend>Rechercher</legend>
	<input type="text" name="inputsearch" id="inputsearch" value="" class="has-hint" title="Saisissez ici votre recherche" />
</fieldset>
</form>

Je souhaite pré-remplir mon champ "inputsearch" avec une valeur qui disparait dès lors que le focus est sur ce dit-champ. J'utilise alors une variante du code de http://www.htmlzengarden.com/2008/12...champs_textes/ :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
	$(document).ready(function() {
 
		$("input.has-hint").each(function(){
			if($(this).val()=="")
				$(this).addClass("forminput_pre").val($(this).attr("title"));
 
			$(this).focus(function(){
				if($(this).val()==$(this).attr("title"))
				$(this).removeClass("forminput_pre").val("");
			});
 
			$(this).blur(function(){
				if($(this).val()=="")
				$(this).addClass("forminput_pre").val($(this).attr("title"));
			});
		});
 
	});
</script>

Si je place ce code dans mon fichier "js/mon_js_a_moi.js" ou dans directement dans le "head" de la page, il ne s'exécute pas.
Il faut que je le mette dans le contenu html avec le formulaire (et donc dans "zone_ajax") pour que mon formulaire réagisse correctement.

Impossible d'utiliser la fonction "live" de JQuery car :

Les évènements supportés : click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.
Les évènements non supportés: blur, focus, mouseenter, mouseleave, change, submit.

Src : http://jquery.developpeur-web2.com/d...ments/live.php

Alors docteur? Y a-t-il une solution pour m'éviter d'avoir du js dans le contenu html?
Merci aux bienfaiteurs capables de me répondre.

exécution javascript après appel ajax

jQuery

Discussions similaires

Partager

Partager