Функция JavaScript не вызывается при попытке скрыть / показать div

Question

У меня есть следующий код JavaScript в его собственном файле .js, который пытается скрыть / показать div с классом «mailing-address-controls» в зависимости от того, установлен ли флажок «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, который определяет "mailing-address-checkbox" и "mailing-address-controls ":

<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 .