Obtenir l'événement de jQuery pour tirer de tous les éléments de l'enfant

Question

J'ai une table à l'intérieur d'une division, contenant 8 images, je veux tirer un événement mouseout soit pour la table ou la div, mais il ne se déclenche pas. Je devine que c'est parce que la souris quitte effectivement chacune des images, ou td, ou tr ... etc est-il un moyen d'obtenir l'événement mouseout pour la table entière de se propager de façon à ce qu'il est tiré même des éléments de l'enfant? Le balisage est simple:

<div id=container>
  <table id="tbl">
    <tr>
      <td><img src=""></td>
      <td><img src=""></td>
      <td><img src=""></td>
      <td><img src=""></td>
    </tr>
    <tr>
      <td><img src=""></td>
      <td><img src=""></td>
      <td><img src=""></td>
      <td><img src=""></td>
    </tr>
  </table>
</div>

et mon code jQuery est:

$("#tbl").mouseout(function(){
  alert("out home");
});

Je ne peux pas tirer les événements mouseout individuels pour les images car il y a parfois des éléments absolument placés sur eux ce qui provoque l'événement mouseout à feu prématurément.

Answer 1

Devrait être:

$("#tbl").mouseout(function(){
  alert("out home");
});

Vous avez manqué le "#". Si vous ne souhaitez que des images, essayez:

$("#tbl >img").mouseout(function(){
  alert("out home");
});

PS. Avez-vous pensé à utiliser $ ( "..."). Vol stationnaire (), à la place?

Answer 2

Vous ne devriez pas utiliser #tbl pour sélectionner la table?

$("#tbl").mouseout(function(){
  alert("out home");
});

Answer 3

Utilisez événement mouseleave, qui a exactement la même fonctionnalité, mais il ne se déclenche pas avec des éléments de l'enfant.

$("#tbl").bind("mouseleave",function(){
  alert("out home");
});