[Résolu] Conflit entre 2 scripts

Bonjour à tous,

je viens chercher un peu d'aide car je ne trouve pas de solution (après maintes essais et recherches)

J'affiche une liste d'annonces via php

<div id="content">
  <!-- début de boucle php -->
  <div class="annonce">
    <div><a class="moins" style="display: none;"></a><a class="plus"></a></div>
    <div class="expand">... du contenu texte et image...</div>
  </div>
  <!-- fin de boucle php -->
</div>

Avec un système d'accordéon pour ouvrir/fermer les annonces (demande de mon client)

<script type="text/javascript">
$(document).ready(function(){
	// accordeon
	$('.moins').click(function(){
		$(this).parent().parent().find('.expand').slideToggle("slow");
		$(this).parent().find('.plus').css( "display","block" );
		$(this).css( "display","none" );
	});	
	$('.plus').click(function(){
		$(this).parent().parent().find('.expand').slideToggle("slow");
		$(this).parent().find('.moins').css( "display","block" );
		$(this).css( "display","none" );
	});
});
</script>

Tout fonctionne pour le mieux mais dès que j'ajoute le script suivant pour trier mes annonces, mon système d'accordéon ne fonctionne plus mais seulement après avoir effectué un tri de mes annonces, car au début tout fonctionne.

<script type="text/javascript">
$(document).ready(function(){
	// trier par prix
	var ascending = false;
	$('#bt_budget').click(function(){
	    var sorted = $('.annonce').sort(function(a,b){
    	    return (ascending == (convertToNumber($(a).find('.prix').html()) < convertToNumber($(b).find('.prix').html()))) ? 1 : -1;
	    });
    	ascending = ascending ? false : true;
	    $('#content').html(sorted);
	});
	var convertToNumber = function(value){
		return parseFloat(value.replace('€',''));
	};
});
</script>

J'espère avoir été un peu prêt clair.

Quelqu'un saurait-il me dire pourquoi ce deuxième script perturbe le premier ??
Modifié par yaka93 (21 Jan 2014 - 17:51)

salut,

As-tu regardé ta console ? Tu n'as pas une erreur javascript ?

Salut Benj,

non... juste ce message à propos de Jquery (jquery-1.8.3.min.js)
L'utilisation de « getPreventDefault() » est obsolète. Utiliser « defaultPrevented » à la place.

Je continue de chercher...

Désolé j'avais mal lu ton code.
Ton second code modifie le dom de ta liste. Les événements ne sont donc plus valable.

Tu peux essayer un truc comme cela pour ton accordéon :

$( "#content" ).on( "click", ".moins", function() {
...
});

en effet, cela fonctionne !!

Par contre, je ne comprends pas tout... (dom modifié donc événements plus valables)
Avec Jquery, on modifie en permanence le dom sans que cela pose problème à chaque fois.
Il faut peut être que je revois les bases pour appréhender cette situation dans l'avenir.

Si tu as un lien qui peut m'éclairer, je suis preneur.

Oui la doc http://api.jquery.com/on/#direct-and-delegated-events

Le fonctionnement était différents avec les fonctions delagate() et live().

yaka93 a écrit :
Avec Jquery, on modifie en permanence le dom sans que cela pose problème à chaque fois.

Je parle de la modification du dom d'un élément sur lequel tu as fait ton événement.

J'étais justement en train de lire cette page.
Merci encore pour ton aide.