Bootstrap Confirmation doesnt work because of button onclick

Question

<script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap.js"></script>
<script src="path/to/bootstrap-confirmation.js"></script>

I use Bootstrap Confirmation.

This doesnt work :

<a class="btn btn-danger btn-xs" data-toggle="confirmation" 
   onclick="DeleteUser(this);" data-id="10"><span class="fa fa-plus">
 </span> Delete</a>

This works same page :

  <button class="btn btn-default" data-
 toggle="confirmation">Confirmation</button>
  <a class="btn btn-default" data-toggle="confirmation">Confirmation1</a>

My confirmation settings on document ready

 $('[data-toggle="popover"]').popover({ placement: 'left', html: true, trigger: 'hover' });
    $('[data-toggle=confirmation]').confirmation({ btnOkLabel: 'Yes', btnCancelLabel: 'No', title: 'Are you sure?' });

UPDATE My ajax delete function :

function DeleteUser(ele) {
    var id = $(ele).attr('data-id');
    $.ajax({
        type: 'POST',
        cache: false,
        url: '../ashx/FriendOperation.ashx',
        data: { id: id, rol: ' ' ,op:<%=(int)CrudOp.Delete%>},
        beforeSend: function () {
           //bla bla
        },
        success: function (data) {
            var jsonData = JSON.parse(data);
            if (jsonData != null) {
                if (parseInt(jsonData) > 0) {

                    alert('okey');
                    GetFriendOp();
                } else {
                  alert('expception');
                }
            } else {

                alert('expception');
            }
        }
    });

}

Can I combine with AJAX like $('#element').confirmation('show');

SUCCESS :

$("[data-toggle=confirmation]").confirmation({btnOkLabel: 'Yes', btnCancelLabel: 'No', title: 'Are you sure?',container:"body",btnOkClass:"btn btn-sm btn-success btn-xs",btnCancelClass:"btn btn-sm btn-danger btn-xs",onConfirm:function(event, element) { alert('confirm clicked'); }});

Thanks @DanCouper .

DanCouper DanCouper · Accepted Answer · 2017-06-09T11:30:48

The inline onclick handler will unbind any other event handlers. You're basically overwriting what bootstrap confirm does, it's completely pointless you even using confirm in this instance because you're just writing your own logic. Looking at the Boostrap Confirm docs, it provides you with hooks for adding logic. Don't just add onclick attributes to stuff that already has defined (event listener) behaviour and an API that allows you to do what you're trying to do now (ideally don't use onclick attributes at all in HTML if possible, but that's something else)

Bootstrap Confirmation doesnt work because of button onclick

1 Answers