blazorとjQueryでtitleタグよりテキストを取得しh1タグに入力したい

実現したいこと

• [aタグをクリックした瞬間にh1タグのテキストをtitleタグのテキストから取得したい]

前提

blazorでSPAなシステムを作っています。
その中にjQueryにてh1タグをtitleから拾ってくる機能を実装中に以下のような動作で困っております。

発生している問題

aタグをクリックしてもページ自体は書き換わるものの、jQueryは1回目には動作せず、２回目に動作する。

該当のソースコード

blazor
ソースコード

■a.razor（titleタグ部分）
<PageTitle>映像項目一覧</PageTitle>

■b.razor（書き換えたいh1タグ部分）

映像項目一覧

・該当のリンクボタンソース

<div class="nav-item px-3"> <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> <span class="oi" aria-hidden="true"></span><span class="title01" @bind="title">ほげほげ</span> </NavLink> </div>

・blazorでのコンパイル後

<div class="nav-item px-3" b-hlwxk8ij4i=""><!--!--> <a href="" class="nav-link active"><!--!--> <span class="oi" aria-hidden="true" b-hlwxk8ij4i=""></span><!--!--> <span class="title01" @bind="title" b-hlwxk8ij4i="">ほげほげ</span> </a> </div>

■index.html jQuery

　　　　$(document).on("click change unload", ".nav-link", function () { $('h1').text($('title').text()); })

試したこと

console.log($('title').text());
などでコンソール出力を確認しました。
また、on がページ読み込みが完了せずに動いているのが問題なのかと思いunloadやloadなども試してみましたが結果は変わりませんでした。

補足情報（FW/ツールのバージョンなど）

開発環境：Visual Studio2022
動作確認環境：edge