Utiliser stopPropagation() sur on click

**feelwatt** · 05/12/2019, 12h34

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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... ?

Invité · 05/12/2019, 12h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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
});

**feelwatt** · 05/12/2019, 13h16

Ok, super merci

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

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 05/12/2019, 13h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**feelwatt** · 05/12/2019, 14h29

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.

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

Je vais aller voir ca.
Merci

Un ptit moment puis résolu

**feelwatt** · 05/12/2019, 14h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 05/12/2019, 15h27

Les avis sont partagés...

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.

**feelwatt** · 05/12/2019, 15h51

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 ?