PreventDefault in bootstrap confirmation doesn't work

Question

When I use this code:

$(function() {
            $('#enableBtn{!! $zone->id !!}').on('confirmed.bs.confirmation', '', function () {
                e.preventDefault();

                // Do Ajax Here
                var ZoneId = 1;
                var value = 1;
                var published_at = $('#published_at').val();
                $.ajax({
                    type: "POST",
                    url: host + '/zone/toggleEnable',
                    data: {id: title, value: body},
                    success: function( msg ) {
                        alert('success');
                        //$("#ajaxResponse").append("<div>"+msg+"</div>");
                    }
                });

            });

        });

and i click on Yes in the confirmation popup, the e.preventDefault() doesn't work and the whole page reloads which is not a desired behavior since i need to call the ajax. Why is this happening ? How i can solve this ?

Answer 1

Your callback function is missing its event parameter. Try replacing this:

$('#enableBtn{!! $zone->id !!}').on('confirmed.bs.confirmation', '', function () {

with this:

$('#enableBtn{!! $zone->id !!}').on('confirmed.bs.confirmation', '', function (e) {

Note the addition of the e argument, which is now available to you on the next line:

e.preventDefault();