Why aren't my click() to on() conversions working as expected?

Question

The .click in jquery is deprecated. So I made amendments to the existing code, however, there seems to be some issue.

    GetPageButtons() {
    let $saveButton = $("<input />", {
        type: "button",
        value: "Save",
        class: "button large save",
      }),
      $cancelButton = $("<input />", {
        type: "button",
        value: "Cancel",
        class: "button large cancel",
      });
    $saveButton.click(() => {
      this.UpdateRecord();
    });
    $cancelButton.click(() => {
      this.modal.success = true;
      let _parent = this;
      $.each(_parent.fields, function (i, field) {
        delete this.newValue;
        this.element.val("");
      });
    });
    return [$cancelButton, $saveButton];
  }

The above code works, although my linter complains saying it deprecated.

  GetPageButtons() {
    let $saveButton = $("<input />", {
        type: "button",
        value: "Save",
        class: "button large save",
      }),
      $cancelButton = $("<input />", {
        type: "button",
        value: "Cancel",
        class: "button large cancel",
      });
    $saveButton.on("click", function() {
      this.UpdateRecord();
    });
    $cancelButton.on("click", function() {
      this.modal.success = true;
      let _parent = this;
      $.each(_parent.fields, function (i, field) {
        delete this.newValue;
        $( this ).element.val("");
      });
    });
    return [$cancelButton, $saveButton];
  }

The refactor to the suggested use of .on('click', fn){} however is not functioning. I get an error that says:

"Uncaught TypeError: this.UpdateRecord is not a function".

Why? It should work the same as the .click which is shorthand for .on. Any suggestions???

Can't see anything in [the docs](https://api.jquery.com/click/) that says `.click()` is deprecated — Phil, Mar 03 '22 at 22:15
Your issue is that you've switched from arrow functions to regular ones — Phil, Mar 03 '22 at 22:16
@Phil the warning comes up in VSCODE. However, the .on should still work. — dangerprone, Mar 03 '22 at 22:41
@dangerprone my mistake, `click()` is deprecated but the [docs are out of date](https://github.com/jquery/api.jquery.com/issues/972) — Phil, Mar 03 '22 at 22:46
@Phil also you are right about the arrow function. I neglected to consider lexical scoping. :/ — dangerprone, Mar 03 '22 at 22:49

score 0 · Accepted Answer · answered Mar 03 '22 at 22:16

This does not work, because you are using normal function in contrast to the original code that used arrow function.

This means that the this inside the functions refers to something different.

Change it to

$saveButton.on("click", () => {
  this.UpdateRecord();
});
$cancelButton.on("click", () => {
  this.modal.success = true;
  let _parent = this;
  $.each(_parent.fields, function(i, field) {
    delete this.newValue;
    $(this).element.val("");
  });
});

and it should work as originally.

Why aren't my click() to on() conversions working as expected?

1 Answers1