Forum : jQuery.on() et event listener

Salut à tous,
j'ai un petit problème que je n'arrive pas à résoudre avec le .on() de jQuery.
J'ai mis en place le plugin Taxonomy sous CakePHP pour gérer l'ajout de tags et tout fonctionne correctement... jusqu'à la suppression.
En effet, lorsque j'ajoute un tag, je suis obligé de rafraichir la page pour pouvoir le supprimer sinon, je me retrouve sur une page blanche (le lien me renvoi directement sur l'action du controller).
Après avoir regarder au niveau de l'inspecteur, je m'aperçois que l'event n'est pas présent sur le lien de suppression du tag que je viens d'ajouter.
Voici le code du tag :

<span class="label">Tag<a href="#" class="delTaxo">x</a></span>

et le code JS qui permet la suppression :

$('.delTaxo').on('click', function(e){
    var a = $(this);
    $.get(a.attr('href'));
    a.parent().fadeOut();
    e.preventDefault();
});

j'ai essayé avec ce code mais cela ne fonctionne pas non plus :

$('.label').on('click', '.delTaxo',  function(e){
    var a = $(this);
    $.get(a.attr('href'));
    a.parent().fadeOut();
    e.preventDefault();
});

Je précise que j'ai le même type de problème sur d'autres liens qui utilise l'AJAX...
Merci d'avance pour vos réponses ;)

alexis

Réponse acceptée

Alors pour moi c'est logique que ça ne fonctionne pas, tu mets :

$('.label').on('click', '.delTaxo', function(e){...});

Or la span label n'est pas présente au chargement de la page (et donc au chargement du JS).
Remplace ton .label par un élément existant au chargement de la page, et non rajouté en js, ce qui donne :

$('.form-input').on('click', '.delTaxo',  function(e){
    var a = $(this);
    $.get(a.attr('href'));
    a.parent().fadeOut();
    e.preventDefault();
});

alexis

Salut, on peut en voir un peu plus sur ton code HTML ?

Romano83

Auteur

Salut Alexis,
voila le code HTML en plus :

<div class="form-input">
    <input name="data[Taxonomy][tag]" placeholder="Tags" class="addTaxo input" id="tag" value="" type="text"/></div>
    <span class="label">Design <a href="/portfolio/admin/taxonomy/Terms/delete/4" class="delTaxo">x</a></span>
    <span class="label">Intégration <a href="/portfolio/admin/taxonomy/Terms/delete/5" class="delTaxo">x</a></span>
    <span class="label">Développement <a href="/portfolio/admin/taxonomy/Terms/delete/6" class="delTaxo">x</a></span>
</div>

Romano83

Auteur

Effectivement, c'est mieux en mettant un élement déjà existant sur la page et non rajouté en js...
Des fois, je ne vois plus mes erreurs !
Merci pour ta réponse ;)

jQuery.on() et event listener

4 réponses