How to bind multiple event in 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;
}

user_9515207 · Answer

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;
}

user_5648954 · Answer

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;
}

How to bind multiple event in jQuery

2 Answers