11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,


Je suis en phase de mise au point d'une page très scriptée.
Un append ne fait rien sous IE 7+8 (ok IE9 et tous les autres nav).

L'idée est d'avoir des pastilles numérotées sur lesquelles on clique - pas au hover - pour faire apparaitre une légende (façon tooltip)
Ce texte est dynamiquement lu dans une liste qui sera masquée et dont on fera apparaitre seulement les li correspondants au légendes cliquées, au fur et à mesure.

Bref,
à chaque clic je lis le .text() du li correspondant (la relation entre les éléments se fait par un 'nombre' dans les id).
je créer alors une variable legend2 devant contenir tout le code que je dois ensuite insérer en dom (puis redétruire).

Sauf que outre des pb de focus, sous IE7 le clic déclenche tout sauf l'insertion par append.
un alert montre que toutes les données sont bien initialisées.

Ca devient chaud.
Merci

extrait:

// -----------------------------------------------------
//Gestion du click sur une  pastille par live because les 34 .mark sont créés par le script avant.
	jQuery('.mark').live('click',function(e) {
	// on prend les x,y du marqueur et on décale un peu pour les x,y de la bulle
		position = jQuery(this).position();
		posX=position.left + 20; posY = position.top + 10;
	
// on marque la pastille comme active et on retire son title qui ne doit plus apparaitre maintenant
		jQuery(this).addClass('actif').removeAttr('title');

// on a cliqué sur une pastille #mark-num, on doit extraire num de son id
//num est saisi sur 2 digits de 00 à 99
		jQuery('.tmp-legend').remove();
		var num = 0;
		var mark = jQuery(this).attr('id');
		var  num = mark.slice(-2);
		var li_id = '#n-' + num; // pour trouver le li légende

		var clone_id = 'nb-' + num; // devient le id du clone

// efface le précédent et on trouve le li de légende en rapport
		jQuery('.tmp-legend, .legend2').remove();
		legend = jQuery(li_id);
//on le clone pour l'insérer et en tirer ce qu'il faut.
		legend_tmp = legend.clone(false, false).appendTo('#ecolobox').addClass('tmp-legend').attr('id', clone_id);
		legend_tmp.find('span').remove();// on vire le span de numérotation du clone et on garde le texte
		var legend2 = jQuery(legend_tmp).text();


// on reconstruit un div avec l'id du clone et une class legend2 contenant le txt de légende.
// c'est destiné à apparaitre à côté du clic, puis il faudra " l'envoyer " en liste normale de légende.
		var legend3 = '<div class="legend2" id="' + clone_id + '" title="fermer"/> </div>';
		alert('clone_id: ' + clone_id + ' -  legend2: ' + legend2 + ' -  legend3: ' + legend3 );
		
//on insère l'élément en dom PB IE 7 +8
		jQuery('#wrap-ecolo').append(legend3);
		//jQuery('#wrap-ecolo').appendChild(legend3);
		jQuery('.legend2').text(legend2).css({'top' : posY, 'left' [langue]osX}).slideDown(150, closeL2);
//alert('posX: ' + posX + '  -  posY: ' + posY);
		//posX=e.pageX; posY = e.pageY;jQuery(legend2)
		
		//ménage
		//jQuery('.tmp-legend').delay(200).remove();


		

	});


Modifié par elz64 (08 Nov 2011 - 11:43)
c'est réglé.

Un / qui n'a rien à faire là dans le code qui est inséré!
title="fermer" />

var legend3 = '<div class="legend2" id="' + clone_id + '" title="fermer" /> </div>';

Modifié par elz64 (08 Nov 2011 - 11:45)