单击该按钮不会触发弹出的确认框

Clicking the button does not trigger Confirm-box popup

本文关键字：确认 按钮 单击      更新时间：2024-05-18

我正在使用jQuery确认框插件，并希望在锚点击事件时触发它。我使用的代码不起作用：

<a href="javascript:addData();" class="btn btn-primary btn-block example-p-2">Add Grid</a>

function addData(){
    $('.example-p-2').on('click', function () {
        $.confirm({
            confirmButtonClass: 'btn-info',
            cancelButtonClass: 'btn-danger'
        });
    });
}

当我点击上面的按钮时，它应该会打开一个小的花式确认框，但它会重新加载页面。我还得到一个错误：object cant find property。

请纠正我。

<script src="jquery.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <script src="pretty.js"></script>
<script type="text/javascript" src="jquery-confirm.js"></script>

将代码更改为：

<a class="btn btn-primary btn-block example-p-2">Add Grid</a>
<script>
    $('.example-p-2').on('click', function () {
        $.confirm({
            confirmButtonClass: 'btn-info',
            cancelButtonClass: 'btn-danger'
         });
     });
</script>

http://jsfiddle.net/nzezu5zy/

你可以试试这个。。。

<a id='addData' class="btn btn-primary btn-block example-p-2">Add Grid</a>
$('#addData').bind('click',function(){

});

您的addData（）函数只是在第一次调用时将事件侦听器添加到按钮中，以显示您应该直接使用的确认弹出窗口

$('.example-p-2').on('click', function () {
                                $.confirm({
                                    confirmButtonClass: 'btn-info',
                                    cancelButtonClass: 'btn-danger'
                                });
                            });

你的按钮应该看起来像

<a href="#" class="btn btn-primary btn-block example-p-2">Add Grid</a>

这是一个工作的Plunker

您需要停止事件默认行为，在这种情况下，它是一个a元素，因此它将尝试导航到您提供的href。您可以通过执行evt.preventDefault()来防止这种情况。您也不需要函数定义。

替换您的代码：

function addData(){
    $('.example-p-2').on('click', function () {
        $.confirm({
            confirmButtonClass: 'btn-info',
            cancelButtonClass: 'btn-danger'
        });
    });
}

至：

 $('.example-p-2').on('click', function (evt) {
      evt.preventDefault();
      $.confirm({
           confirmButtonClass: 'btn-info',
           cancelButtonClass: 'btn-danger'
      });
 });

希望这能有所帮助。

相关文章：