How to define function and bind them to event in jQuery

Question

When I try to nest functions and bind them to event,I met some problems.

I definedoutpatient1 and outpatient2,and they are nested to outpatient

When I click each cells, it seems $(this) seems not to be captured.

How can I fix them?

Where are there any reason?

Thanks

let style = "style1"
$('.click_btn').on('click', function(e) {
  e.preventDefault();
  style = $(this).data().style;
  console.log(style)
});
function outpatient1() {
  console.log("#1")
  let clickedID = $(this).attr('id');
  console.log("clickedID", clickedID);
  $(this).removeClass().addClass(style);
}
function outpatient2() {
  console.log("#2")
  $(this).nextAll(':lt(3)').addClass(style);
}
function outpatient() {
  if (style == "style1") {
    outpatient1()
  } else {
    outpatient2()
  }
}
function hover() {
  $(this).addClass('style3');
}
$("#calendar .day").on({
  mouseover: 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;
}

.style3 {
  background-color: yellow;
}

<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>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>

I am not able to get your issue here? What is the current behaviour? what is the expected behaviour? — palaѕн, Mar 30 '20 at 11:56

mplungjan · Accepted Answer · 2020-03-30T12:09:46.737

$(this) is not passed to the function you are calling

Here I pass the event from which you can take the target

Alternatively "bind" this using function.call(this) like outpatient1.call(this)

it has same result

let style = "style1"
$('.click_btn').on('click', function(e) {
  e.preventDefault();
  style = $(this).data().style;
  console.log(style)
});
function outpatient1(e) {
  console.log("#1",e.target)
  let clickedID = $(e.target).attr('id');
  console.log("clickedID", clickedID);
  $(e.target).removeClass().addClass(style);
}
function outpatient2(e) {
  console.log("#2")
  let clickedID = $(e.target).attr('id');
  console.log("clickedID", clickedID);
  
  $(e.target).nextAll(':lt(3)').addClass(style);
}
function outpatient(e) {
  if (style == "style1") {
    outpatient1(e)
  } else {
    outpatient2(e)
  }
}
function hover() {
  $(this).addClass('style3');
}
$("#calendar .day").on({
  mouseover: 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;
}

.style3 {
  background-color: yellow;
}

<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>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>

score 1 · Answer 2 · edited Mar 30 '20 at 12:08

The issue was with the nested function(). the value of 'this' was different for nested function();

please do read this thread for the difference between call and apply.

let style = "style1";

function onStyleBtnClick(styleName){
  style= styleName;
}

function outpatient1() {
  let clickedID = $(this).attr('id');
  console.log("clickedID", clickedID);
  $(this).removeClass().addClass(style);
}
function outpatient2() {
  $(this).nextAll(':lt(3)').addClass(style);
}
function outpatient() {
  if (style == "style1") {
    outpatient1.call(this); // CHANGED
  } else {
    outpatient2.call(this); // CHANGED
  }
}
function hover() {
  $(this).addClass('style3');
}
$("#calendar .day").on({
  mouseover: 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;
}

.style3 {
  background-color: yellow;
}

<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>
<button onclick="onStyleBtnClick('style1')">style1</button>
<button onclick="onStyleBtnClick('style2')">style2</button>

Your answer is more in line with what was asked i.e. how to "bind" - I find my version easier to understand though — mplungjan, Mar 30 '20 at 12:11
okay :), I just thought of sharing knowledge about call, apply and bind. — Bharat Choudhary, Apr 01 '20 at 14:37
I agree. That is what I said. Your answer answers the actual question whereas mine gives a more standard example — mplungjan, Apr 01 '20 at 15:19

How to define function and bind them to event in jQuery

2 Answers2