Comment masquer un "cube-2" par cliquez sur "Cliquer-moi" que c'est inclus par "cube-2"? J'ai fait un événement mais il a supprimé tout mon cube-2, je veux cacher cube-2 un par un. Tout le monde peut résoudre ce problème? S'il vous plaît aidez-moi.
p>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<div class="cube-1"></div>
</html>5 Réponses :
Vous devez gérer un événement de clic dyanamique du deuxième cube et empêcher l'événement de clic de la commande parent, lorsque l'enfant Cube est cliqué sur
$('.cube-1').click(function name(e) {
if(e.target.className == "cube-1")
{
$('.cube-1').append('<div class="cube-2"><div class="click-me">click me to
hide this cube</div></div>');
}
});
$(document).on('click','.cube-2',function name(e)
{
$(this).remove();
// how to add event click on "click-me" to hide "cube-2"??
})
Cela supprime tout le cube-2 et donc ne résout pas le problème.
J'apprécie votre suggestion.
Vous avez juste besoin de lier votre clic sur DIV pendant que vous ajoutez votre cube-2.
Ajoutez votre script comme ci-dessous -
$ ('. cube-1'). On (click ', fonction (événement) { $ ('. cube-1'). Ajouter (cliquez sur moi pour cacher ce cube '); }) MyFunction de fonction (param) { événement.stoppropagation (); $ (param) .Remove (); }
Vous pouvez ajouter un identifiant à votre cube-2 div et une balise d'ancrage de clic-moi correspondante et retirez uniquement la DIV avec cet identifiant.
Vous pouvez également vouloir vérifier Chaîne de modèle P>
$('.cube-1').click(function name(e) {
var cubeCounter = 1;
if (e.target.className == "cube-1") {
$('.cube-1').append(`<div class=cube-2 id=cube-${cubeCounter}><div class=click-me id=${cubeCounter}>click me to hide this cube</div></div>`);
cubeCounter++;
}
})
$(document).on('click', '.click-me', function name(e) {
var cubeId = e.target.id;
$(`#cube-${cubeId}`).remove();
})
Vous pouvez utiliser la méthode ci-dessous pour des éléments générés dynamiquement.
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Essayez ceci
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cube-1"></div>