CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Heisenberg
Heisenberg

Reputation: 5279

How to bind multiple event in jQuery

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>

Upvotes: 2

Views: 68

Answers (2)

Nick Parsons
Nick Parsons

Reputation: 50664

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>

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370659

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>

Upvotes: 1

Related Questions