Ajout d'element ne fonctionne pas
Salut,
Mon HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Manage Players</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
.users{
display: flex;
flex-direction: row;
align-content: space-between;
}
.users img{
margin: 0 5px;
}
</style>
</head>
<body>
<div class="col-xs-8 col-sm-10 col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="center">Convocations U11 3</h2>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Joueurs</th>
<th>Date</th>
<th>Validation</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<div class="users">
<img class="img-circle" src="http://placehold.it/50x50" alt="">
<h4 class="text-primary">MichKael</h4>
</div>
</th>
<th> 10/09/2016</th>
<th>
<a href="#" class="btn btn-success" >Présent <span class="glyphicon glyphicon-ok"></span></a>
</th>
</tr>
<tr>
<th>
<div class="users">
<img class="img-circle" src="http://placehold.it/50x50" alt="">
<h4 class="text-danger">James R.</h4>
</div>
</th>
<th> 10/09/2016</th>
<th>
<a href="#" class="btn btn-danger remove">Absent <span class="glyphicon glyphicon-remove"></span></a>
</th>
</tr>
<tr>
<th>
<div class="users">
<img class="img-circle" src="http://placehold.it/50x50" alt="">
<h4 class="text-danger">James R.</h4>
</div>
</th>
<th> 10/09/2016</th>
<th>
<a href="#" class="btn btn-danger remove">Absent <span class="glyphicon glyphicon-remove"></span></a>
</th>
</tr>
<tr>
<th>
<div class="users">
<img class="img-circle" src="http://placehold.it/50x50" alt="">
<h4>Leonel M.</h4>
</div>
</th>
<th> 10/09/2016</th>
<th>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-danger">Absent</button>
<button type="button" class="btn btn-success">Présent</button>
</div>
</th>
</tr>
<tr>
<th>
<div class="users">
<img class="img-circle" src="http://placehold.it/50x50" alt="">
<h4>Cristiano R.</h4>
</div>
</th>
<th> 10/09/2016</th>
<th>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-danger">Absent</button>
<button type="button" class="btn btn-success">Présent</button>
</div>
</th>
</tr>
<tr>
<th>
<div class="users">
<img class="img-circle" src="http://placehold.it/50x50" alt="">
<h4>Neymar J.</h4>
</div>
</th>
<th> 10/09/2016</th>
<th>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-danger">Absent</button>
<button type="button" class="btn btn-success">Présent</button>
</div>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Mon JS
var choix = document.querySelectorAll('.btn-group .btn-danger')
for(var i = 0; i < choix.length; i++){
choix[i].addEventListener('click', function(e){
var valeur = this.textContent
var del = this.parentNode
del.parentNode.removeChild(del)
//
var btn = document.createElement('a')
btn.setAttribute('href','#')
if(valeur == 'Absent'){
btn.innerHTML = 'Absent'
btn.classList.add('text-danger','remove')
document.body.appendChild(btn)
}else{
btn.innerHTML = 'Présent <span class="glyphicon glyphicon-ok"></span>'
btn.classList.add('text-primary')
}
del.appendChild(btn)
console.log(btn)
})
}j'arrive à créer l'élement et à lui donner tous les attributs que je veux et je l'insere.
mais lorsque je clique sur le bouton l'element ne se creer pas et y'a aucune erreur
5 réponses
@Grafikart a fait une vidéo là dessus "jquery on"
en gros il explique qu'en bindant le conteneur parent, les nouveaux enfants seront pris en compte.
Non les enfants ne s'integraient pas à la page mais j'ai résolu le probleme
mais maintenant les nouveaux enfants ne prennent pas le comportement que j'ai donné aux aures boutons.
et je veux le faire en JS pas en jquery