Pourquoi le code suivant ne fonctionne-t-il pas? Le carré rouge devient vert mais sur un deuxième clic ne redevient pas rouge.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="red">
div {
margin: 0 auto;
width: 100px;
height: 100px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
jQuery(document).ready(function($) {
$("#red").click(function() {
$(this).attr("id", "green");
});
$("#green").click(function() {
$(this).attr("id", "red");
});
});
Voir aussi: https://codepen.io/thomasmalley/pen/OqWNaM
5 Réponses :
Le problème est que vous affectez le gestionnaire d'événements au chargement, avant que l'élément #green n'existe.
Pour résoudre ce problème, vous devez utiliser des gestionnaires d'événements délégués afin que le sélecteur d'élément soit évalué lorsque l'événement se produit:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="foo"></div>
#foo {
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
}
#foo.green {
background-color: green;
}
jQuery(function($) {
$('#foo').click(function() {
$(this).toggleClass('green');
});
});
Cela étant dit , il n'est pas très pratique de changer les attributs id au moment de l'exécution. Ils devraient être statiques. Une bien meilleure idée serait de basculer une classe sur l'élément à la place, qui régit le style.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="red"></div>
div {
margin: 0 auto;
width: 100px;
height: 100px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
jQuery(function($) {
$(document).on('click', "#red", function() {
$(this).attr("id", "green");
});
$(document).on('click', "#green", function() {
$(this).attr("id", "red");
});
});
Mec tu es vraiment rapide :)
Cela se produit car lorsque vous chargez la page, il n'y a pas d'élément avec l'ID vert pour un événement de clic auquel ajouter un événement.
À la place, vous pouvez utiliser la délégation d'événements en utilisant:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="red"></div>
et
div {
margin: 0 auto;
width: 100px;
height: 100px;
}
#red {
background-color: red;
}
#green {
background-color: green;
} De cette façon, votre événement de clic sera appliqué à l'élément avec l'id green.
Voir l'exemple de travail ci-dessous:
jQuery(document).ready(function($) {
$(document).on('click', '#red', function() {
$(this).attr("id", "green");
});
$(document).on('click', '#green', function() {
$(this).attr("id", "red");
});
});
$(document).on('click', '#green', function() {...}
$(document).on('click', '#red', function() {...}
Comme l'id est ajouté dynamiquement, le code $ ("# green"). click (function () { une fois chargé ne trouvera pas d'élément avec l'id green donc l'événement de clic n'est pas défini pour cet élément. Ainsi, vous pouvez ajouter un écouteur au niveau du document:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="red">
div {
margin: 0 auto;
width: 100px;
height: 100px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
jQuery(document).ready(function($) {
$(document).on('click', 'div', function(){
var id = $(this).attr('id');
if(id === 'red'){
$(this).attr("id", "green");
} else {
$(this).attr("id", "red");
}
});
});
Tout d'abord, il y a div avec l'id rouge et après avoir cliqué sur ce div, il passe l'id en vert qui est dynamiquement donc dans ce cas nous utilisez délégation d'événements . Essayez le code ci-dessous -
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <div id="red"></div> </div>
div {
margin: 0 auto;
width: 100px;
height: 100px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
jQuery(document).ready(function($) {
$(".parent").on('click', '#red', function() {
$(this).attr("id", "green");
});
$(".parent").on('click', '#green', function() {
$(this).attr("id", "red");
});
});
Se fonde presque exclusivement sur le contenu hors site pour une explication. Un petit extrait de la page liée expliquant pourquoi la délégation d’événements est nécessaire améliorerait cette réponse imo. " La délégation d’événement nous permet d’attacher un seul écouteur d’événement, à un élément parent, qui se déclenchera pour tous les descendants correspondant à un sélecteur, que ces descendants existent maintenant ou soient ajoutés dans le futur. < / i> "
J'ai mis à jour ma réponse. Merci d'avoir indiqué ma réponse. @ Lewis
La combinaison d'explications et de lien pour plus de détails Les informations m'ont beaucoup aidé!
Mon plaisir :) @thomasmalley
modifier le script
$(document).on('click','#red',function() {
$('#red').attr("id", "green");
});
$(document).on('click','#green',function() {
$('#green').attr("id", "red");
});