Le gestionnaire de clics Jquery ne fonctionne pas dans un tableau

Question

J'utilise un plugin Jquery appelé Jquery Content Panel Switcher. Il fait exactement ce que le titre dit, il change les divs avec facilité. Le html de la page est :

<!--The switcher buttons, basic anchor tags, with the switcher class -->
<a id="content1" class="switcher">One</a>
<a id="content2" class="switcher">Two</a>

<!-- The panel you wish to use to display the content -->
<div id="switcher-panel"></div>

<!-- The actual content you want to switch in and out of the panel, this is hidden -->
<div id="content1-content" class="switcher-content show"></div>
<div id="content2-content" class="switcher-content show"></div>

Dans chacun de mes panneaux de contenu, j'ai un formulaire. Dans chaque formulaire, il y a un tableau :

<table class="table table-hover" data-controller="rank">
  <thead>
    <tr>
      <th colspan="4" align="left"><h2>Rank 1</h2></th>
    </tr>
    <tr>
      <th>Number</th>
      <th>Requirements</th>
    </tr>
  </thead>
  <tbody>
    <tr data-name="one_li">
      <td>1</td>
      <td>Info</td>
    </tr>
    <tr data-name="two_li">
      <td>2</td>
      <td>More Info</td>
      </td>
    </tr>
  </tbody>
</table>

J'essaie de déclencher une action si une ligne est cliquée. Voici le javascript que j'utilise :

$(document).ready(function(){
  $('#switcher-panel form table tbody tr').click(function(){
     console.log("Clicked");
   });
});

Quand j'utilise le sélecteur Jquery de $('#switcher-panel form table tbody tr') dans ma console Chrome, il trouve la table et tout semble correct. Lorsque je le place dans mon fichier javascript, rien ne se passe. Un conseil serait le bienvenu. Merci pour votre aide.

Answer 1

Ça va marcher :

$('#switcher-panel').on('click', 'table tr', function() {
    console.log("Clicked", this);
});

Ejemplo

Cela ajoute un écouteur à la #switcher-panel qui écoute click sur ses enfants, si l'enfant cliqué relève de l'événement 'table tr' sélecteur.

Consultez cet article pour plus d'informations sur la délégation d'événements. (Ctrl+f pour la délégation d'événements)

Answer 2

Si le contenu du panneau est ajouté de manière dynamique, vous devrez déléguer l'événement de clic à un élément parent statique. Essayez ceci :

$('#switcher-panel').on('click', 'form table tbody tr', function(){
    console.log("Clicked");
});

Je pense que vous pourriez raccourcir le sélecteur d'enfant à table tr également.