Java Scriptでダイアログからのページ遷移がうまくいきません

Question

前提・実現したいこと

削除確認のダイアログを表示させて、OKをクリックしたときに別ページに移動
キャンセルを押したときは現在のページを維持
他の方法などがあればそちらでもいいので教えてください

発生している問題・エラーメッセージ

ダイアログのOKボタンを押しても現在のページのリロードになる

該当のソースコード

<script type="text/javascript">
        <!--
        $(document).on('click', '#delete', function(event) {
            var res = confirm('予約概要「xxx」を削除します。やり直すことはできません。本当に削除してよろしいですか？');
            if( res == true ){
                window.location.href = 'login.html';
            } else {
                // キャンセルの処理
                return false; // 処理を終了する
            }
        });
        
        //-->
    </script>

<form>

            <!-- 外枠 -->
            <div class="y_data_area">
                <!-- end -->

                <!-- タイトル -->
                <table id="table1">
                    <col style="width: 4%;" />
                    <col style="width: 31%;" />
                    <col style="width: 31%;" />
                    <col style="width: 31%;" />
                    <col style="width: 3%;" />
                    <tr>
                        <th></th>
                        <th id="th">登録ID</th>
                        <th id="th">名前</th>
                        <th id="th">表示名</th>
                        <th></th>
                    </tr>
                </table>
                <!-- end -->
                <div class="y_scroll_box">
                    <div class="y_hidden">
                        <table class="y_data">
                            <col style="width: 4%;" />
                            <col style="width: 32%;" />
                            <col style="width: 32%;" />
                            <col style="width: 32%;" />
                            <tr>
                                <td id="td"><input type="radio" name="" required></td>
                                <td id="td">532</td>
                                <td id="td">SAMPLE</td>
                                <td id="td">sample</td>
                            </tr>
    
                       <tr>
                                <td id="td"><input type="radio" name="" required></td>
                                <td id="td">532</td>
                                <td id="td">SAMPLE</td>
                                <td id="td">sample</td>
                            </tr>
                            <tr>
                                <td id="td"><input type="radio" name="" required></td>
                                <td id="td">532</td>
                                <td id="td">SAMPLE</td>
                                <td id="td">sample</td>
                            </tr>
                            
                        </table>
                    </div>
                </div>
            </div>
            <button id="Change">変更する</button>
            <button id="delete">削除する</button>

        </form>

試したこと

window.open().location.href = 'login.html';
を実行すると別タブで表示可能

Answer 1

buttonタグのデフォルトはsubmitです。
form送信のためですが、ページ遷移より優先されます。
preventDefaultでsubmitイベントを止めるかtype=buttonにしてください。

Comments

[monolith123]

ありがとうございます！無事解決しました！

[m.ts10806]

解決できたようで何よりです

Answer 2

以下だとどうでしょうか？

if( res == true ){
  event.preventDefault();
  window.location.href = 'login.html';
}