悬停在图块上时，JQuery.hover（）无法正常工作

Question

I'm trying to add some functionality when hovering over a 2048 tile. Each tile of value n has a class 'tile-n'.

For the basic 'tile-2' tile, I have the hover functionality:

  <script>
    $( ".tile-2" ).hover(
      function(){
        alert("in!");
      }, function() {
        alert("out!");
      }
    );
  </script>

But nothing is happening and I don't believe the hover is being registered and I'm not sure why.

My implementation can be seen at: http://kpscript.github.io/PCN-Embark-2048/

The 'tile-2' div can be seen at: html.body.container.game-container.tile-container.tile-2.

Of course, I plan to do more non-trivial things with hover, but for now I can't even get the alert to show.

Answer 1

I think you load html using ajax, this should work

<script>
$( "body" ).on('hover','.tile-2',
  function(){
    alert("in!");
  }, function() {
    alert("out!");
  }
);

;)

Answer 2

Try like this, It works for me...

    $("body").on('mouseenter', '.tile-2', function () {
        alert("in!");
    }).on('mouseleave', '.tile-2', function () {
        alert("out!");
    });

Answer 3

You are trying to bind the event to the element before the element is rendered on the page. Wait until its loaded.

$(document).ready({

  $( ".tile-2" ).hover(
      function(){
        alert("in!");
      }, function() {
        alert("out!");
      }
    );

});