.on('click') ne fonctionne pas sur les éléments ajoutés par AJAX
Bonjour,
Je peine depuis plusieurs jours sur un script jQuery (je suis débutante en JS) et tout ne se passe comme prévu ! Je m'explique :
Le but de ce script est :
1. Afficher un span lorsque au moins une des case d'un tableau est cochée, et afficher le nombre de case cochées,
2. Charger avec AJAX une version actualisée du tableau dans un <div> lorsque le lien "actualiser" est cliqué
Au niveau du HTML j'ai ceci :
Code:
1
2
3
4
5
6
7
8
| <span id="itembutton"> <!--bouttons à afficher quand au moins & case est cochée -->
<a></a> //des liens...
<a></a>
</span>
<a href="#" id="ajaxrefresh"><span class="glyphicon glyphicon-refresh"></span></a> <!-- mon boutton rafraichir -->
<div id="ajaxlocation">
<!-- le tableau à actualiser avec des <input type="checkbox" name="select" value="allselected"> dedans -->
</div> |
Et une partie du code JS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| var countChecked = function () { // la fonction qui compte les cases cochées
var n = $('input:checked').length;
if ($('#checkbox').is(':checked') == true) { // pour ne pas compter la case "séléctionner tout"
n = n - 1;
}
if (n !== 0) {
$('#checkcount').text(n + (n === 1 ? ' élément sélectionné' : ' éléments séléctionnés'));
$('#itembutton').show('fast'); // on affiche un span
} else {
$('#checkcount').text('');
$('#itembutton').hide();
$('#checkbox').prop('checked', false);
}
};
var ajaxrefresh = function (url) { // la fonction AJAX appelée par les clics sur certains liens
$.ajax({
url: url,
cache: false,
/*dataType: 'html',*/
success: function (e) {
$('#ajaxlocation').empty();
$('#ajaxlocation').append(e); // on remplit
countChecked();
},
error: function (e) {
alert('Ne marche pas');
}
})
};
// ce qui ne marche pas avec les cases chargées par AJAX
$('input[type=checkbox]').on('click', countChecked);
$('input[type=checkbox]').click(function () {
if ($('#checkbox').prop('checked') == false) {
var nbc = $('input:checked').length;
var nb = $('input').length;
if (nbc === nb - 1) {
$('#checkbox').prop('checked', true);
}
}
}); |
Pouvez-vous m'aider à comprendre ce qui ne fonctionne pas ? Merci d'avance !
