11521 sujets

JavaScript, DOM et API Web HTML5

Acceder à élément créé par AJAX via fonction Javascript

J'ai fait l'instruction AJAX suivante pour charger ma page html

$.get('assets/php/matchs.ajx.php',function(data){
    $('.matchs').html(data);
});


Ca marche très bien mais le problème c'est que dans la page php que je charge il y a par exemple la classe .select à laquelle j'ai appliquée 
$('.select').on('click',function(){...});
mais ça ne marche plus.

Pourtant quand je code directement dans ma page sans avoir à charger au préalable par AJAX tout marche parfaitement..

Le truc c'est que c'est un tableau que je charge et dont les éléments sont lus dans une base de donnée et sont appelés à changer très fréquemment ce qui fait que je suis obligé de passer par php.

Besoin d'aide SVP...

ps: Je veux que le fichier final index.html soit en [b]html[/i] et pas en [i]php[/b]
Salut Smiley smile

C'est un problème courant de chargement du DOM.

Si j'ai bien compris dans ton retour ajax tu va injecter un élément qui va contenir la classe .select pour laquelle une fonction est déclarée AVANT que tu ne charge l'élément en ajax Smiley smile
et c'est là le problème..
AU moment du chargement l'objet que tu récupère via php n'est pas là et est donc inconnu pour le sélecteur Smiley cligne

Solution :
- Recharger ta fonction sur le .select avant de quitter l'ajax, juste après le .html()
Merci #pchlj. Maintenant ça marche parfaitement!!! Smiley smile

Mais stp. C'est quoi exactement le DOM? Depuis que j'ai commencé avec jQuery je vois ça partout Smiley sweatdrop
Modérateur
Sinon il y a aussi la délégation d'évènements pour gérer l'évènement:

Admettons qu'on ait un code ainsi

<div id="ma-table">
  <table>
    …
     <a class="select" href="#truc">une action</a>
    …
  </table>
</div>

et l'ajax mettra à jour le contenu de #ma-table.


$('#ma-table').on('click', '.select', function(){});

Fonctionnera pour tous les .select dans la table, présents et à venir.
Car l'évènement est attaché à un élément déjà existant, et lors de chaque «click» il vérifie que l'élément déclencheur correspond pour déclencher la fonction.

Cette technique a un autre avantage: Lorsque tu as beaucoup d'éléments (disons 40 .select) dans le tableau, ça n'attache qu'un seul écouteur dans le DOM, au lieu de 40. Smiley smile
kustolovic a écrit :
Sinon il y a aussi la délégation d'évènements pour gérer l'évènement:

Admettons qu'on ait un code ainsi

&lt;div id="ma-table"&gt;
  &lt;table&gt;
    …
     &lt;a class="select" href="#truc"&gt;une action&lt;/a&gt;
    …
  &lt;/table&gt;
&lt;/div&gt;

et l'ajax mettra à jour le contenu de #ma-table.


$('#ma-table').on('click', '.select', function(){});

Fonctionnera pour tous les .select dans la table, présents et à venir.
Car l'évènement est attaché à un élément déjà existant, et lors de chaque «click» il vérifie que l'élément déclencheur correspond pour déclencher la fonction.

Cette technique a un autre avantage: Lorsque tu as beaucoup d'éléments (disons 40 .select) dans le tableau, ça n'attache qu'un seul écouteur dans le DOM, au lieu de 40. Smiley smile


Je viens de tester et tu as trop raison même. C'est la meilleure méthode!! Smiley smile
Sujet clos
Aller à