11540 sujets

JavaScript, DOM et API Web HTML5

[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. Smiley confused

Quelqu'un saurait-il me dire pourquoi ce deuxième script perturbe le premier ??
Modifié par yaka93 (21 Jan 2014 - 17:51)
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.
Sujet clos
Aller à