如何在jQuery中绑定多个事件

Question

I tried to bind multiple events in jQuery.

For example in the below snippet, I defined 2 functions and they are used in eventhander .

I tried this code but didn't work well.

I would like to know where must be fixed.

If someone has opinion please let me know.

Thanks

 function outpatient(elm) { elm.removeClass().addClass(style1); } function hover(elm) { elm.addClass(style2); } $("#calendar .day").on("click hover", function(event) { if (event.type == "click") { outpatient($(this)) } else { hover($(this)) } });

 td { padding: 10px; border: solid black 1px; } table { border-collapse: collapse; } .is-clicked { background-color: aqua; } .style1 { background-color: red; } .style2 { background-color: aqua; }

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <div id=calendar> <table> <tr> <td id=1 class=day>1</td> <td id=2 class=day>2</td> <td id=3 class=day>3</td> <td id=4 class=day>4</td> <td id=5 class=day>5</td> <td id=6 class=day>6</td> <td id=7 class=day>7</td> </tr> </table> </div>

Answer 1

Listen for the mouseenter event instead, there's no such thing as a hover event:

 function outpatient(elm) { elm.removeClass().addClass('style1'); } function hover(elm) { elm.addClass('style2'); } $("#calendar .day").on("click mouseenter", function(event) { if (event.type == "click") { outpatient($(this)) } else { hover($(this)) } });

 td { padding: 10px; border: solid black 1px; } table { border-collapse: collapse; } .is-clicked { background-color: aqua; } .style1 { background-color: red; } .style2 { background-color: aqua; }

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <div id=calendar> <table> <tr> <td id=1 class=day>1</td> <td id=2 class=day>2</td> <td id=3 class=day>3</td> <td id=4 class=day>4</td> <td id=5 class=day>5</td> <td id=6 class=day>6</td> <td id=7 class=day>7</td> </tr> </table> </div>

Answer 2

You can simplify your code a little by passing an object with the events you want to listen for as the keys, and their associated functions you want to execute when called. You can use $(this) to reference the element triggering the event in your functions:

 function outpatient() { $(this).removeClass().addClass('style1'); } function hover() { $(this).addClass('style2'); } $("#calendar .day").on({ mouseenter: hover, /* mouseover or mouseenter for hover */ click: outpatient });

 td { padding: 10px; border: solid black 1px; } table { border-collapse: collapse; } .is-clicked { background-color: aqua; } .style1 { background-color: red; } .style2 { background-color: aqua; }

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <div id=calendar> <table> <tr> <td id=1 class=day>1</td> <td id=2 class=day>2</td> <td id=3 class=day>3</td> <td id=4 class=day>4</td> <td id=5 class=day>5</td> <td id=6 class=day>6</td> <td id=7 class=day>7</td> </tr> </table> </div>