====== Listener / écouteur ======

Admettons un tableau classique comme ça avec un bouton qui par défaut est transparent
<code html>
<table>
  <tr>
    <td>
      <button class="menu transparent">Menu</button>
    </td>
  </tr>
</table>
</code>

On veut que lorsque la souris passe sur une ligne du tableau, on fasse apparaitre le bouton en supprimant la class transparent

On utilise généralement le code pour ajouter un écouteur sur le hover

<code javascript>
  $('tr').toggle(function(){
      $(this).find('.menu').removeClass('transparent');
    },function(){
      $(this).find('.menu').addClass('transparent');
    }
  );
</code>

Sauf que si on rajoute du code en live avec .append() par exemple
<code javascript>
$('table').append('<tr><td><button class="menu transparent">Menu</button></td></tr>');
</code>

Alors l'effet de hover ne fonctionne pas...

Pour éviter ce problème, il faut utiliser .on() en prenant soin de le mettre sur l'élément parent du tr dans notre cas, comme ceci


<code javascript>
  $('table').on({
    mouseenter: function(){
      $(this).find('.menu').removeClass('transparent');
    },
    mouseleave: function(){
      $(this).find('.menu').addClass('transparent');
    }
  },"tr");
</code>