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

実現したいこと

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

前提

Windows 11 の Visual Studio 2022 で Blazor WASMアプリをターゲットフレームワーク .NET 7.0 で作っています。
その中にjQueryにてh1タグをtitleから拾ってくる機能を実装中に以下のような動作で困っております。

発生している問題

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

該当のソースコード

blazor
ソースコード

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

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

<h1 id="msg">映像項目一覧</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

退会済みユーザー

2023/03/01 01:25 編集

何を何で作っているかを質問欄を編集して追記してください。（例: Windows 10 の Visual Studio 2022 で Blazor WASM アプリをターゲットフレームワーク .NET 7.0 で作っています・・・とか）特に、Blazor Server なのか Blazor WASM なのかという情報が重要。

macaca

2023/03/03 01:48

コメントありがとうございます。記載すべき点を変更いたしました。

退会済みユーザー

2023/03/03 01:59

特に、Blazor Server なのか Blazor WASM なのかという情報が重要。・・・と書きましたが、どっちなんですか？　どっちか分からないということですと、まずはそのあたりを勉強してもらわないとこの先話が通じにくいと思います。。

macaca

2023/03/03 02:10

失礼しました。blazor WASMになります。

退会済みユーザー

2023/03/03 03:36

「■a.razor（titleタグ部分）」と「■b.razor（書き換えたいh1タグ部分）」は違うページなのですか？最初 a を表示していて、その状態からメニューの b をクリックして b に遷移した際、a の title を取得して b の h1 要素に表示したいと言ってますか？　そうだとするとかなり無理目な気がしますけど。

行動規範の内容に同意します

回答1件

ベストアンサー

質問に対するコメント欄の私の質問、

「■a.razor（titleタグ部分）」と「■b.razor（書き換えたいh1タグ部分）」は違うページなのですか？

に返事がありませんが、違うページでは質問にあったJavaScript のコード、

$('h1').text($('title').text());

で書き換えられるはずがないので同じページ内の話であろうと理解してレスしておきます。

以下の Microsoft ドキュメントに書いてある "アプリのプリレンダリング中は、JavaScript (JS) の呼び出しなどの特定のアクションは実行できません。" ということが理由で期待通りに動かないのではないかと思います。

プリレンダリング
https://learn.microsoft.com/ja-jp/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-7.0#prerendering

具体的には、例えば、exampleJsInterop.js という名前のファイルを作ってその中に以下のような書き換え用のスクリプトを置いて、

window.setTileToH1Tag = () => {
    $('h1').text($('title').text());
}

それを jQuery.js とともに index.html で取り込めるように設定し、

h1 を title で書き換えたい razor ページで以下のようにすれば（@inject IJSRuntime JSRuntime と OnAfterRenderAsync メソッドがポイントです）、

RAZOR
1@page "/fileupload"
2@inject IJSRuntime JSRuntime
3
4<PageTitle>File Upload by jQuery Ajax</PageTitle>
5
6<h1>FileUpload</h1>
7
8<p>ブログの記事「<a href="http://surferonwww.info/BlogEngine/post/2022/10/28/file-upload-on-blazor-web-assembly.aspx">Blazor WASM でファイルアップロード</a>」を書くために作った検証用のページ。</p>
9
10<form id="form1" method="post" enctype="multipart/form-data">
11    <input type="file" name="postedfile" />
12</form>
13
14<button type="button" class="btn btn-primary" @onclick="UploadFile">
15    アップロード
16</button>
17
18<div id="result"></div>
19
20@code {
21    private async Task UploadFile()
22    {
23        await JSRuntime.InvokeVoidAsync("uploadFile");
24    }
25
26    //OnInitialized / OnInitializedAsync ではダメ
27    protected override async Task OnAfterRenderAsync(bool firstRender)
28    {
29        if (firstRender)
30        {
31            await JSRuntime.InvokeVoidAsync("setTileToH1Tag");
32        }
33    }
34}