11489 sujets

JavaScript, DOM et API Web HTML5

Modification d'une class et evenement lié

Bonjour,

je suis bloqué sur un code tout simple, je ne comprends pas le soucis.

http://jsfiddle.net/8guzD/

La class s'applique bien la première fois, mais jquery ne la reconnait pas ensuite pour y ajouter un evenement.
Est ce du à un comportement de jQuery ? ou Javascript en général.
J'ai raté quelque chose mais quoi ?

Merci !!
Salut Tony,

Merci pour la démo, j'ai été voir live
je comprend que la différence vient de là
'Attach an event handler for all elements which match the current selector, now and in the future'

Quelqu'un pourrait m'expliquer pourquoi ca ne fonctionne pas ? à quoi cela est du ? au DOM ou autre

j'ai testé en javascript et c'est pareil

http://jsfiddle.net/R5NRz/

Sinon je veux bien une corde, car ca fait 4 h que je suis dessus... je me sens tellement inutile Smiley lol
Modérateur
live() est dépréciée depuis 1.7
a écrit :
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().


il faut utiliser on avec un filtre depuis:

<div id="container">
<a href="#" id="test" class="off">geo</a>
</div>



$('#container').on('click', '#test.off', function(){
        $(this).removeClass('off').addClass('on');
        alert('ok');
});
$('#container').on('click', '#test.on', function(){
        $(this).removeClass('on').addClass('off');
        alert('not ok');
 });


à noter qu'on peut aussi effectuer un simple test avec un seul évènement:

$('#test').click(function(){
  if ($(this).hasClass('off')){
        $(this).removeClass('off').addClass('on');
        alert('ok');
  }
  else {
        $(this).removeClass('on').addClass('off');
        alert('not ok');
  }
 });

Modifié par kustolovic (27 Mar 2014 - 07:16)
Merci à tous les 2

Je vois que ca fonctionne,
mais je ne comprends ce qu'il se passe de plus avec on

je vais essayer de comprendre la delegation d'evenements, qui me semble très flou
Modérateur
Alors pour l’explication:

Prenons ce code:

<a href="#" id="test" class="off">geo</a>
<script>
$('#test.off').click(function(){
        $(this).removeClass('off').addClass('on');
        alert('ok');
 });

$('#test.on').click(function(){
        $(this).removeClass('off').addClass('on');
        alert(' pas ok');
 });
</script>

$('#test.off') va rechercher dans le dom un élément avec l'id test et la classe off. Il va le trouver et lui attacher l'exécution de la fonction lors de l'évènement click.
$('#test.on') va rechercher dans le dom un élément avec l'id test et la classe on. Il ne va pas en trouver et donc il n'attachera rien du tout.
Lors du click, l'évènement déclenche l’exécution de la fonction, la classe passe de off à on, mais l'évènement attaché à l'élément ne change pas lui.

maintenant si j'écris:

$('#container').on('click', '#test.off', function(){
        $(this).removeClass('off').addClass('on');
        alert('ok');
});

Cela va rechercher un élément avec un id "container", et lui attacher une fonction (avec un filtre) lors du click. Lorsque l'on clique dans #container, jQuery va vérifier à ce moment si on a cliqué sur un élément correspondant au filtre ''#test.off', et si il est trouvé lui appliquer l'éxecution de la fonction.

Pour plus de compréhension, $('#test.on').click(function(){}); est un alias de $('#test.on').on('click', function(){}); et font donc strictement la même chose. Cependant avec la forme "on" on peut ajouter ces filtres qui permettent d'attacher des évènements à des éléments qui n'existent pas encore, alors qu'avec la forme sans filtre on attache des évènements qu'à des qui existent déjà lors de l’exécution du script.

p.s. :
L'autre avantage de l'utilisation des filtres est de soulager le navigateur. Si j'ai un tableau avec 500 cases et que je fait:
$('#truc td').on('click', function(){});
Je vais attacher un écouteur d'évènements à 500 éléments du DOM, ce qui n'est pas des mieux pour les performances. Alors qu'en l'écrivant ainsi:
$('#truc').on('click', 'td', function(){});
Je n'attache l'écouteur qu'à un seul évènement du DOM, soulageant un peu l’exécution de ma page.
Sujet clos
Aller à