jQuery组合的单击和悬停功能仅适用于单击，不适用于悬停

Question

My question is fairly simple but confusing. I have combined "click" and "hover" by using .on(), but the function is only firing when click, not hover.

JS:

    var hoverElem = null;
    $("table tbody tr td").on('click hover', function(e){
        alert("TDDDDD!!!!");

    });

The html part is a simple html table.

Does anyone know why?

Answer 1

Just wondering how click and hover working together, because when you mouseover itself event is fired.

this is the example using fiddle

var hoverElem = null;
$("div").on('click mouseover', function(e){
    alert("TDDDDD!!!!");

});

Answer 2

I think you have to use 'mouseover' rather than 'hover', which isn't listed in the events: http://api.jquery.com/Types/#Event . There is a separate hover function, though: http://api.jquery.com/hover/ .

Answer 3

I don't know WHY it doesn't work when you put the hover in jQuery on, but if you use jQuery hover instead, it works. Click the button below to run the code.

 $(function() { function my_function(e) { alert("TDDDDD!!!!"); }; $("table tbody tr td").on('click', function(e) { my_function(e); }) .hover(function(e) { my_function(e); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>test</td> </tr> </table> 

Answer 4

There's just slightly different syntax for multiple events in the same on() .

$( "table tbody tr td" ).on({
  click: function() {
    alert("TDDDD!!");
  }, 
  hover: function() {
    alert("TDDDD!!");
  }
});

This has repeated code, so just create a function:

alertFunc = function() {
  alert("TDDDD!!!");
};
$( "table tbody tr td" ).on({
  click: alertFunc, 
  mouseover: alertFunc
});

See the example for handling multiple events at: http://api.jquery.com/on/ (Look for: "Example: Attach multiple event handlers simultaneously using a plain object.")