我有一个带有提交按钮ant的表单，我想添加一个确认模式对话框 使用Django模板时，使用JQuery示例未成功

我目前使用JS Confirm（）（请参见下文），但是我想自定义对话框 我了解我应该使用JQuery对话框，所以我尝试实现此解决方案

这是我的模板

{% extends 'layouts/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block extrahead %}
<!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        $(document).ready(function() {
            $("#randomize").click(function(event){
                var response = confirm("Do you confirm randomization");
                if (response == false) {
                    event.preventDefault()
                }
            });
        });
    </script>

{% endblock %}
{% block title %}Index | Intense TBM{% endblock %}
{% block content %}



<div class='container'>

<h1>Randomization form</h1>
</br>

<div class="row">
    <div class="col-sm">
        <strong>Patient code: </strong>{{ preincluded.pat_num }}
    </div>
    <div class="col-sm">
        <strong>Age: </strong>{{ preincluded.age }}
    </div>
    <div class="col-sm">
        <strong>Sex: </strong>
        {% if preincluded.pat_sex == 1 %}
            Male
        {% else %}
            Female
        {% endif %}

    </div>
</br></br>
</div>
    <form method="POST" class="post-form">
        {% csrf_token %}
        {{ form |crispy }}
        <!--<button id="randomize" type="submit" class="btn btn-primary" onclick="confirm('Do you confirm randomization?')">Randomize</button>-->
        <button id="randomize" type="submit" class="btn btn-primary">Randomize</button>
    </form>

</div>
</br></br></br></br>

{% endblock %}

我尝试通过以下方式更改JS代码：

  <script>

    $(document).ready(function() {
        $("#randomize").click(function(event){
            $('body').append('<div id="dialog"></div>');
            $("#dialog").html('Do you confirm randomization?');

            $( "#dialog" ).dialog({
                title: 'Intense TBM Randomization',modal: true,buttons: {
                    Yes: function() {
                        //
                        $( this ).dialog( "close" );
                    },Cancel: function() {
                        $( this ).dialog( "close" );
                        //
                    }
                }
            })
        });
    });
  </script>

编辑 实际上，我收到一条消息错误：对象不支持属性或方法“对话框”

如果使用开发工具检查页面，我可以看到已添加div #dialog，但对话框未显示