jquery确认插件不工作

问题描述:

我正在尝试使用jquery1.8.3的jquery插件。但事件处理程序(警报)对任何一个按钮都不起作用。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> 

任何线索?

+0

如果你看一下要求,它说**的情态动词引导3 ** –

+0

为bootstrap3更新的代码,但有错误confirm.js文件在modal.modal(“秀”); – navyad

+0

如果你也使用CSS,它工作正常[FIDDLE](http://jsfiddle.net/L7yuL/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() 
       } 
       } 
      }); 

     }); 

    }); 

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

+0

没有运气。尽管按钮可以用于那里// modal.find(“。confirm”)。click(function(){settings.confirm(settings.button); }); – navyad

我看到你正在尝试使用自定义确认插件,你需要下载jQuery确认插件和引导程序。相反,我使用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>