Discussion :

[feelwatt]

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é]

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]

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é]

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) {

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

[feelwatt]

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]

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