Question

我正在使用jquery1.8.3尝试使用jquery插件。但事件处理程序（警告）不适用于任何一个按钮。

    <!DOCTYPE html>
<html>
<body>

<button class="confirm" type="button">Delete the comment</button>


<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="jquery.confirm.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$(".confirm").confirm({
    text: "Are you sure you want to delete that comment?",
    title: "Confirmation required",
    confirm: function(button) {
        alert("foo")
    },
    cancel: function(button) {
        alert("bar")
    },
    confirmButton: "Yes I am",
    cancelButton: "No",
    post: true
});
});
</script>
</body>
</html>

任何线索？

Answer 1

试试这样：

 $(document).ready(function(){
   $(".confirm").click(function(){
     $.confirm({
     'message': "Are you sure you want to delete that comment?",
     'title': "Confirmation required",

     'buttons': {
            'Yes': {

                'action': function(){
                   alert();
                   }
                 },
            'No': {

                'action': function(){
                   alert()
                }
              }
           });

        });

    });

我不明白为什么你把按钮作为参数。

Answer 2

我看到你正在尝试使用Customized confirm插件，你需要下载jquery确认插件和bootstrap。相反，我使用jquery提供的代码在我的php项目中创建插件，它完美无缺。请参阅下面的代码。它对我来说很完美。查看此链接以获取更多信息。 https://jqueryui.com/dialog/#modal-confirmation

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">

$(document).ready(function(){
$("#submitbutton").click(function() {
$( "#dialog-confirm" ).dialog( "open" );
      });
 $("#dialog-confirm").dialog({
      autoOpen: false,
      height: 400,
      width: 400,
      resizable: false,
      modal: true,
      buttons: {
        "Confirm": function() {
           alert("Clicked Confirm");
           $( this ).dialog( "close" );

        },
        Cancel: function() {
          alert("Clicked Cancel");
          $( this ).dialog( "close" );
        }
      }
    });
});


</script>
</head>
<body>
<input type="button" id="submitbutton" value="Submit"/>
<div id="dialog-confirm">
<p>Are you sure?</p>
</div>
</body>
</html>

jquery确认插件无法正常工作

2 个答案: