Listener / écouteur

Admettons un tableau classique comme ça avec un bouton qui par défaut est transparent

<table>
  <tr>
    <td>
      <button class="menu transparent">Menu</button>
    </td>
  </tr>
</table>

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

  $('tr').toggle(function(){
      $(this).find('.menu').removeClass('transparent');
    },function(){
      $(this).find('.menu').addClass('transparent');
    }
  );

Sauf que si on rajoute du code en live avec .append() par exemple

$('table').append('<tr><td><button class="menu transparent">Menu</button></td></tr>');

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

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