Bootstrap 启动框警报不起作用

tvz2xvvm  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(156)

尝试使用Bootbox确认,但我开始用bootbox.alert()测试它,但它不工作。
我确认我已将 bootstrab.cssbootstrab.jsjquery.js 和-bootbox.min.js 包含在网页标题中:

<link href="{% static "css/patients.css" %}" rel="stylesheet">
 <link href="{% static "css/bootstrap.css" %}" rel="stylesheet">

<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/jquery-ui.min.css" %}" rel="stylesheet">
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/bootstrap-datetimepicker.min.css" %}" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

这里是我的按钮,我想生成警报时,单击:

<form id='form'  name='delete'  action="{% url 'delete_person' person.id %}"
          method='POST'>

    {% csrf_token %}

    <button type='submit' class='btn btn-xs btn-link icon'><i  class='glyphicon glyphicon-remove'></i></button>
</form>

在相同的 .html 文件中,我有:

<script type="text/javascript">
    $(document).ready(function(){
           $('.btn').on('click' , function(){
                 bootbox.alert("hello there!");
                         });
                 });</script>

当我点击按钮时什么也没发生,
我确认我的浏览器能够从CDN下载内容,不确定问题出在哪里。

v8wbuo2f

v8wbuo2f1#

我找到了答案here
这对我很有效:

<script type="text/javascript">
$(document).ready(function(){
$(".btn#del").click(function(e) {
    e.preventDefault();
    var lHref = $('form#form1').attr('action');
    bootbox.confirm("Are you sure?", function(confirmed) {
        if(confirmed) {
            window.location.href = lHref;
        }
    });
});
})
</script>

<button type='submit'  onclick="bootbox.confirm();" id="del" class='btn btn-xs btn-link icon'><i  class='glyphicon glyphicon-remove'></i></button>
    </form></td>

相关问题