尝试隐藏/取消隐藏 div 时未调用 JavaScript 函数

Question

我在自己的 .js 文件中有以下 JavaScript 代码，它试图隐藏/取消隐藏类为“mailing-address-controls”的 div，具体取决于是否选中了“mailing-address-checkbox”。我希望在页面加载和复选框值更改时发生这种情况：

$(document).ready(() => {

    function mailingAddressCheckbox() {
        if ($(this).is(":checked"))
            $(".mailing-address-controls").addClass("hidden");
        else
            $(".mailing-address-controls").removeClass("hidden");
    }

    $(".mailing-address-checkbox").load(mailingAddressCheckbox);
    $(".mailing-address-checkbox").change(mailingAddressCheckbox);
});

我有以下 Razor .cshtml 代码，它定义了“邮件地址复选框”和“邮件地址控件”：

<label class="control">
    @Html.CheckBoxFor(model => model.IsMailingSameAsPhysical, new { @class = "mailing-address-checkbox" })
    @Html.LabelFor(model => model.IsMailingSameAsPhysical)
</label>
<div class="mailing-address-controls df fww cols hidden">
    ......
</div>

但是，mailingAddressCheckbox 函数似乎永远不会被调用，当我选中/取消选中复选框时没有任何反应。请问我做错了什么？

Answer 1

jQuery .load() 不是一个事件监听器，而是一个在页面中加载远程内容的函数。

实际上没有任何类似的事件可以直接在元素上使用...如果你真的需要那种事件来触发你的函数，也许 .ready() 可以完成这项工作。

编辑

要在页面加载时触发该功能，同时保持其编码方式，您可以简单地在所需复选框上触发一个更改事件： $(".mailing-address-checkbox").trigger("change");

在此行之后包含该行，它应该可以按预期工作：

$(".mailing-address-checkbox").change(mailingAddressCheckbox);

触发更改事件不会更改值，但会执行与事件关联的函数。您可以在jQuery documentation 中阅读更多相关信息。