为什么我的 click() 到 on() 转换没有按预期工作？

Question

jquery 中的 .click 已被弃用。所以我对现有的代码进行了修改，但是，似乎存在一些问题。

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

上面的代码是有效的，尽管我的 linter 抱怨说它已被弃用。

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

然而，对建议使用 .on('click', fn){} 的重构不起作用。我收到一条错误消息：

“未捕获的类型错误：this.UpdateRecord 不是函数”。

为什么？它的工作方式应该与 .click 相同，.click 是 .on 的简写。 有什么建议吗？？？

Answer 1

这是行不通的，因为您使用的是普通函数，而不是使用箭头函数的原始代码。

这意味着函数内的 this 指的是不同的东西。

将其更改为

$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("");
  });
});

，它应该像原来一样工作。