IE n'exécute plus onclick suite à une manipulation DOM via jquery

[sparh]

Bonjour,

je met à jour certains contenu de mon site via des requêtes ajax (jquery).

Je me rend compte que sous IE les onclick ou onmouseover ne fonctionne plus une fois le contenu mis à jour.

Le problème se pose qu'avec IE.

J'ai cherché et trouvé 2-3 sujets similaires mais pas de réponse :

http://forum.alsacreations.com/topic-5-50741-1.html

http://stackoverflow.com/questions/771721/ie-not-allowing-onclick-event-on-dynamically-created-dom-a-element

Quelqu'un aurait il une idée pour résoudre se problème ?

Merci d'avance

[captain_torche]

Aurais-tu un lien, qu'on puisse tester ?

[tayoze]

Peut-tu nous donner la méthode que tu utilise pour ton onclick ?

exemple : <input onclick="xxxxx" > ou $(xxxxx').click(

[MarvinLeRouge]

Salut,

Si j'ai bien compris, tu utilises la méthode click de jQuery. Or, celle-ci ne fonctionne que sur ce qui est déjà défini au moment de l'appel.

Si tu veux tenir compte de modifications éventuelles, jette un il aux fonctions live et delegate.

[sparh]

Bonjour,

donc voilà un exemple de code.

Avec IE au bout d'un certain temps les onclick et onmouseover ne marche plus.

Je dis bien au bout d'un certain temps, au début, les 5 6 premières itération de la boucle pas de souci.

<script language="JavaScript" type="text/javascript">  
  function maj_contenu2() {
   // tchat verical
		 $.ajax({
			type: "GET",
			url: "test3.html",
				success:function(data){ 
				var message_ajax = $(".tchat_content");
				message_ajax.empty();
				message_ajax.append(data);
				}
		 });
	 }

  var boucle_generale = setInterval(maj_contenu2,3500);
</script>
--------------------------------------
<div id="contenu" class="tchat_content">
</div>

Et le contenu affiché par test3.html

<a href="http://www.weplayflash.fr" onclick="popUp(this.href,'elastic',500,600);return false;" onmouseover="javascript:$('.information_deux').jHelperTip({ trigger: 'hover', source: 'attribute', attrName: 'alt', oacity: 0.9,  autoClose:true,  })" class="information_deux" alt="Cliquez pour signaler un problème avec ce score.">Test lien 2</a><br /><br />

Voilà, ce qui est bizarre c'est que plus il y a de contenu dans test3.html plus ça bug rapidement.

Voici 2 pages si vous voulez tester

http://www.weplayflash.fr/test.html

http://www.weplayflash.fr/testa.html

Merci d'avance

Modifié 21 Avril 2011 par sparh

[captain_torche]

C'est pas super propre, comme code.

Dans l'idéal, il faudrait utiliser la fonction live(), comme te l'a dit Marvin, pour exécuter le code jQuery sur chacun des éléments chargés via AJAX (Et en prime, tu séparerais le code de l'interactivité).

[tayoze]

Exemple :

Html

<input type="button" id="nom" name="nom"  value="mon nom">

Ajax

	$('#nom').live('click',function() {
		alert('ca marche');
	}); 

Comme cela l'action sera toujours disponible pour ton objet avec l'id "nom"

Modifié 21 Avril 2011 par tayoze

[MarvinLeRouge]

Alors, Moi je te conseillerais d'abord de tester avec un code plus propre, genre :

<a href="http://www.weplayflash.fr" class="information_deux" title="Cliquez pour signaler un problème avec ce score.">Test lien 2</a><br /><br />

(title car un lien n'a pas de alt)

et pour le js

$(function()
{
  $(".tchat_content").delegate(".information_deux", "click", function (e) {e.preventDefault(); popUp(this.href,'elastic',500,600);});
  $(".tchat_content").delegate(".information_deux", "hover", function () {$(this).jHelperTip({ trigger: 'hover', source: 'attribute', attrName: 'title', oacity: 0.9,  autoClose:true}});
});

N.B. : Code non testé

[sparh]

Merci pour vos réponses,

voilà ce que j'ai fait :

 $(function(){ 
   $('.information_trois').live('click',function() { popUp($(this).attr('href'),'elastic',500,600); return false; });
   $('.information_trois').live('hover',function() { $(this).jHelperTip({ trigger: 'hover', source: 'attribute', attrName: 'alt', oacity: 0.9,  autoClose:true}); }); 
  }); 
------------------------------------------
<a href="http://www.weplayflash.fr/coucou"  class="information_trois" alt="Cliquez pour signaler un problème avec ce score.">Test lien 2</a>

Et ça marche donc merci à tous

Par contre j'ai cherché la différence entre live() et delegate mais je n'ai pas bien compris ?

[MarvinLeRouge]

Pas très simple comme réponse. C'est liée au "bubbling" (la remontée de l'évènement de l'élément le recevant jusqu'au nœud document). Alors (qu'on m'arrête si je dis des bêtises) :

• la méthode live n'est pas "chainable" (tu ne peux pas lui coller d'autres méthodes derrière séparées par des points)
  
• la méthode live délègue la gestion des évènements indiqués au niveau du document (donc les évènements font nue remontée complète jusqu'au nœud DOM tout en haut de l'arbre)
  
• La méthode delegate te permet de spécifier le gestionnaire d'évènements, et l'évènement en question n'ira pas plus loin (donc c'est plus rapide, et ça évite les interactions éventuelles sur le chemin de remontée de l'évènement jusqu'au nœud document)
  
• Il me semble qu'avec delegate, il faut que l’élément dont tu te sers comme gestionnaire supporte par nature l'évènement qu'il reçoit pour pouvoir le gérer
  

Tricky, isn't it ?

Modifié 24 Avril 2011 par MarvinLeRouge

[sparh]

Ouahou,

merci pour cette réponse complète.

Je vais donc faire des tests voir si je peux utiliser delegate et voir si ça accélère un peu.

Encore merci à tous