javascript - Blazor のサブメニューにある DOM 要素の JS 相互運用機能の呼び出し

Question

Blazor で JS Interop を介してユーザーがクリックするとモーダルを作成する JS 関数を呼び出そうとしています。問題は、関数が Blazor サブメニュー内にある DOM 要素に対して onclick イベントを使用していることです。その DOM 要素がサイド ナビゲーション バーのサブメニューの外にある場合、正常に動作します。その要素をサブメニュー内に配置すると、Blazor はそれを不平を言いますcannot set property 'onclick' of null

これが私のnavbar HTMLとJS Interopコードです

@inject IJSRuntime JS;

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">Test</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>

        <li class="nav-item px-3">
            <NavLink class="nav-link" @onclick="()=>expandSubNav = !expandSubNav">
                <span class="oi oi-fork" aria-hidden="true"></span> AccountPage
            </NavLink>
            @if (expandSubNav)
            {
        <ul  class="nav flex-column" id="submenu">
            <li class="nav-item px-3">
                <a class="expand-menu" href="page">
                    <span>element1</span>
                </a>
            </li>
            <li class="nav-item px-3">
                <a class="expand-menu" href="page">
                    <span>element2</span>
                </a>
            </li>
            <li class="nav-item px-3">
                <a class="expand-menu" href="page">
                    <span>element3</span>
                </a>
            </li>
            <li class="nav-item px-3">
                <a class="expand-menu">
                   
                    <div   id="addBtn" ><span class="oi oi-plus" aria-hidden="true"></span> Add Element</div>
                    </a>
            </li>
      


        </ul>
            }
        </li>
       
        

    </ul>
</div>

<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <h1 class="modal-title">
            <b>Add Element Here</b>
        </h1>

        <input id="addelementtext" type="text" />
        <button id="add">Add</button>
        <button type="button" class="btn btn-defaultcloseissue" id="closebtn" data-dismiss="modal" onclick="">Close</button>



    </div>
</div>





    </div>
</div>
@code { private bool collapseNavMenu = true;
    private bool expandSubNav;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {


        if (firstRender)
        {
            
                await JS.InvokeVoidAsync("createModal");
            
        }
    }

}

このid要素でonclickを使用しようとしています

<li class="nav-item px-3">
                <a class="expand-menu">
                   
                    <div   id="addBtn" ><span class="oi oi-plus" aria-hidden="true"></span> Add Element</div>
                    </a>
            </li>

作成したサブメニュー内にあります。サブメニューの外でメインのナビメニューに入れると、JS関数は文句を言わず、正常に動作します。

私もこれをやってみました

 protected override async Task OnAfterRenderAsync(bool firstRender)
    {


        if (firstRender)
        {
            if (expandSubNav)
            {
                await JS.InvokeVoidAsync("createModal");

            }
        }
    }

これによりエラーは停止しますが、要素をクリックしても何も起こりません。これを修正するにはどうすればよいですか？これはレンダリングの問題であると感じているため、Blazor LifeCycle について調査しようとしていますが、何ができるかを理解するのに苦労しています。

これも私が呼び出そうとしているJS関数です

window.createModal = function createModal() {
    var modal = document.getElementById("myModal");

    // Get the button that opens the modal
    var btn = document.getElementById("addBtn");
    var closebtn = document.getElementById("closebtn");


    // When the user clicks the button, open the modal
    btn.onclick = function () {
        modal.style.display = "block";
    }



    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    closebtn.onclick = function (event) {

        modal.style.display = "none";
    }
}