Question

我正在使用jQuery confirm box plugin并希望在锚点击事件中触发它。我使用的代码不起作用：

<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>

Answer 1

您需要停止事件默认行为，在这种情况下是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'
      });
 });

希望这有帮助。

Answer 2

你的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

Answer 3

将您的代码更改为：

<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/

Answer 4

你可以试试这个......

<a id='addData' class="btn btn-primary btn-block example-p-2">Add Grid</a>

$('#addData').bind('click',function(){


});

单击该按钮不会触发“确认”框弹出窗口

4 个答案: