Jquery确认框无效

4
我尝试了这个:https://dev59.com/L2cs5IYBdhLWcg3wu2cp#12617274。在我的浏览器中只出现了字符串“您确定吗”,当我点击按钮时没有任何反应。
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Modal confirmation</title>

  <link rel="stylesheet" href="jquery-ui.min.css">
  <script src="external/jquery/jquery.js"></script>
  <script src="jquery-ui.min.js"></script>

  <script>
   $("#dialog").dialog({
   autoOpen: false,
   modal: true,
   buttons : {
        "Confirm" : function() {
            alert("You have confirmed!");            
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#callConfirm").on("click", function(e) {
      e.preventDefault();
      $("#dialog").dialog("open");
    });
  </script>
</head>
<body>
<button id="callConfirm">Confirm!</button>

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>
</body>
</html>

截图: enter image description here

你真的想使用JQuery的对话框吗?基本的JavaScript确认框不足以满足您的需求吗? - kyori
@kyori:是的。我不能使用确认框,因为有些浏览器可以防止打开额外的对话框(例如Chrome)。 - ladiesman1792
2个回答

5
尝试将你的js代码放在文档就绪函数中,这样应该可以正常工作。
$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "Confirm": function() {
        alert("You have confirmed!");
      },
      "Cancel": function() {
        $(this).dialog("close");
      }
    }
  });

  $("#callConfirm").on("click", function(e) {
    e.preventDefault();
    $("#dialog").dialog("open");
  });
});

希望这可以帮到您。
编辑:还需将jquery和css包含添加/更改为:
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

2
请查看此jsfiddle链接,它可以正常工作。 - Rajesh Maharjan
现在它可以工作了。我的jQuery和CSS与你的不同。谢谢。 - ladiesman1792
另外,我将我的包含更改为以下内容以使其正常工作:<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> - ladiesman1792

1

注意:您需要放置以下CDN链接

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-
       confirm/3.3.2/jquery-confirm.min.css">   
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery- 
       confirm/3.3.2/jquery- confirm.min.js"></script>


 $("#btnSubmit").click(function(){

     $.confirm({

     title: 'Confirmation !!',

      content: 'Are you sure, delete this item?',

       buttons: {

        confirm: function () {
         // write your logic    
                 },      
         cancel: function () { 

        } }

        });


        });

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接