Utiliser stopPropagation() sur on click

Bonjour,
je tente de faire réagir le clic sur un élément mais pas ses enfants.
Un tableau:

Code:

---

1 2 3 4 5

<table> <tr> <td class="td_a_cliquer">cliquer la</td> </tr> </table>

---

Puis en Jquery,
sur le clic du td on créer un input et un bouton:

Code:

---

1 2 3

$('.td_a_cliquer').on('click',function(event) { $(this).append('<input type="text"><button id="save">bouton</button>'); // Création dun input texte et d'un bouton });

---

Mais clic sur le bouton et le td réagit toujours au clic.
J'ai cherché et trouvé stopPropagation:

Code:

---

1 2 3 4 5

$('.td_a_cliquer').on('click',function(event) { $(this).append('<input type="text"><button id="save">bouton</button>'); // Création dun input texte et d'un bouton event.stopPropagation(); // Annuler le click });

---

Mais le td réagit toujours au clic.
Je dois mal utiliser le stopPropagation, non ?

On pourrait dire
Si le td_a_cliquer ne contient pas de bouton alors le créer sinon rien... ?

Bonjour,

Event.stopPropagation() évite de propager un évènement aux... parents. Pas aux enfants.

En l'occurrence, il faut l'appliquer aux enfants du <td> :

Code:

---

1 2 3 4 5 6

$('.td_a_cliquer').on('click',function(event) { $(this).html('').append('<input type="text"><button id="save">bouton</button>'); // Création dun input texte et d'un bouton }); $('.td_a_cliquer').on('click', 'input, button', function(event) { event.stopPropagation(); // ne propage pas le click au td });

---

Ok, super merci :P

Je remarque qu'ensuite pour agir sur le button créé, il faut passer par:

Code:

---

1 2 3 4

$('.td_a_cliquer').on('click', 'input, button', function(event) { event.stopPropagation(); // ne propage pas le click au td alert(); });

---

Appeler directement le bouton ne suffit pas:

Code:

---

1 2 3

$('button').on('click', function(event){ alert(); });

---

Citation:

---

Envoyé par feelwatt

Appeler directement le bouton ne suffit pas

---

Parce que le bouton n'existe pas dans le DOM au départ : il est créé dynamiquement.

D'où la syntaxe par délégation :

Code:

---

$('parent_present_dans_le_DOM').on('click', 'machin', function(event) {

---

• voir : .on()
• Comprendre la délégation d'événement en JavaScript

Citation:

---

Parce que le bouton n'existe pas dans le DOM au départ : il est créé dynamiquement.

---

Ah ok c'est ça, il n'existait pas.

Citation:

---

voir : .on()
Comprendre la délégation d'événement en JavaScript

---

Je vais aller voir ca.
Merci ;)
Un ptit moment puis résolu

Bon ca va être 'Résolu'.

Et dis-moi,
je commence à avoir de gros scipts JQuery,
certains ne concernent que certaines pages,
Est-ce que ca vaut le coup de faire plusieurs fihiers .js
et de les charger selon la page.
Du style:

Code:

---

1 2 3 4 5 6 7 8 9 10

<?php if (!isset($_GET['p'])||$_GET['p']=='home.php') {      echo '<script src="js/home.js"></script>';    }    elseif ($_GET['p']=='pdf.php') {      echo '<script src="js/modif_pdf.js"></script>';    }    elseif ($_GET['p']=='params.php') {      echo '<script src="js/params.js"></script>';    }    ?>

---

Avec un switch pour accélérer

Les avis sont partagés... :aie:
A toi de voir.

Le plus long à charger, c'est le 1er affichage (images, librairies, scripts,...).
Après, les fichiers sont en cache.

Faire plusieurs fichiers est (à mon avis) plus facile à gérer/maintenir.

Citation:

---

Après, les fichiers sont en cache.

---

Pourtant quand je fais des modifs sur un script, il prend bien en compte ces modifs.
Le navigateur compare peut être la version cache et la version du serveur ?

• Qu'est-ce que le cache d’un navigateur ?
• Cache web

Citation:

---

[...]Lors du chargement de la page, l'équipement vérifie si l'objet est dans son cache et si la date de validité est bonne.[...]

---

Ok, sur la date de validité...

Citation:

---

Qu'est-ce que le cache d’un navigateur ?
Cache web

---

> Je vais regarder ca.
Merci pour les réponses :applo: