将 JS 函数绑定到来自 razor 文件的另一个脚本文件中的复选框

Question

我有一个部分剃刀视图，其中包含一个文本框，例如 -

@Html.EditorFor(x => x.UnitsBought, new { @onchange = "script.updateUnitPrice(this);" } )

它是从主视图调用的，脚本被引用为 -

$(document).ready(function () {
        let script = new UnitAllocationMaintScript();
        script.initialize();

并且脚本位于不同的 JS 文件中，例如 -

var UnitAllocationMaintScript = (function ($, app) {
"use strict";
var updateUnitPrice = function (element) {
....
}

但是当我更改 UnitsBought 文本框时，出现如下错误 -

脚本未定义。

我应该如何调用该函数。

Answer 1

使用不显眼的事件处理程序。换句话说，不要使用像 onchange 这样的 HTML 属性，而是：

$('#UnitsBought').on('change', function () {
    ...
});

Answer 2

script 是在 $(document).ready() 处理程序函数中定义的，因此超出了在 window.

下运行的 onchange 属性的范围

要解决此问题，您可以使用不显眼的 JS 而不是过时的 on* 属性来附加事件处理程序。试试这个：

@Html.EditorFor(x => x.UnitsBought, new { @class = "units-bought" } )

$(document).ready(function () {
  let script = new UnitAllocationMaintScript();
  script.initialize();

  $('.units-bought').change(function() {
    script.updateUnitPrice(this);
  });
});

将 JS 函数绑定到来自 razor 文件的另一个脚本文件中的复选框

Bind JS function to checkbox in another script file from razor file

javascript

asp.net-mvc

jquery

onchange

razor