Javascript/jQuery：如何在頁面加載時調用“onchange()”回調？

Question

我有一個 ASP.Net Core web 表單，其中包含許多組輸入項，這些輸入項可以隱藏或顯示，具體取決於用戶輸入並存儲在數據庫中的值。

這是每當用戶更改下拉菜單中的值時“顯示”或“隱藏”子菜單的回調，它工作正常：

$('#DW_Answers_Q430').change(function (e) {
    let a = $('#DW_Answers_Q430').val();
    if (a == "None")
      $('#DW_Q430_grp').css('display','none');
    else $('#DW_Q430_grp').css('display','block');
});

問：如何在加載“編輯”菜單時調用此回調，以確保根據從數據庫加載的值正確顯示或隱藏子菜單？

這是我嘗試過的：

編輯.cshtml：

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script type="text/javascript">
        window.onload = function () {
            ...
            dw_refresh();
            ...
        };
    </script>
}

網站.js：

function dw_refresh() {
    console.log('dw_refresh()...');   // <-- dw_refresh() gets invoked
    ...
    var a = $('#D_Answers_Q430').val();
    $('#DW_Answers_Q430').val(a).change();  // <-- But the callback never gets invoked
    ...

問：如何調用我的回調，以確保在“編輯”頁面首次加載時正確顯示子菜單？

---

解決方案：

1. 擺脫 dw_refresh()

2. 替換bind('load change') ：

    $('#DWare_Answers_Q430').bind('load change', function () { let a = $('#DW_Answers_Q430').val(); console.log('DW_Answers_Q430, val:', a); if (a == "None") $('#DW_Q430_grp').css('display','none'); else $('#DW_Q430_grp').css('display','block'); });

Answer 1

在這一行：

$('#DW_Answers_Q430').val(a).change();

.change()是一個事件監聽器設置器，它應該有一個處理程序 function 傳入。

要觸發change事件，您需要的是：

$('#DW_Answers_Q430').val(a).trigger("change");

文檔