Bootstrap-table click delete button to delete rows, do nothing, and refresh the page.

I click the delete button, and a query box pops up. I don"t know why I click the cancel button of the query box, but I still refresh the operation
$("- sharppowerTable"). BootstrapTable ({
)
        url: "/Project/Project/GetPowerList", // url
        cache: false, //  false  AJAX  true
        striped: true,  //false
        sidePagination: "server", //
        queryParams: { PROJECTID: $("-sharpID").val() },
        sortName: "ADDTIME", // 
        sortOrder: "desc", // 
        columns: [
            {
                field: "ID", // jsonname
                visible: false //
            }, {
                field: "USERID", // jsonname
                title: "", // 
                align: "center", // 
                valign: "middle" // 
            }, {
                field: "POWER",
                title: "",
                align: "center",
                valign: "middle",
                editable: {
                    type: "checklist",
                    separator: ",",
                    source: [{ value: "query", text: "" }, { value: "update", text: "" }],
                    validate: function (value) {
                        if (value.length <= 0) {
                            return "";
                        }
                        if (value.length ==1 && value[0] == "update") {
                            return "";
                        }
                    }
                }
            }, {
                field: "ADDTIME",
                title: "",
                align: "center",
                valign: "middle",
                formatter: function (date) {
                    var pa = /.*\((.*)\)/;
                    var unixtime = date.match(pa)[1].substring(0, 10);
                    return getFullTime(unixtime);
                }
            }, {
                title: "",
                align: "center",
                valign: "middle",
                width: 160, // px
                formatter: function (value, row, index) {
                    return "<button class="btn btn-primary btn-sm" onclick="del(\"" + row.ID + "\")"></button>";
                }
            }
        ],
        onLoadSuccess: function (data) {  //
            console.info("");
        },
        onLoadError: function () {  //
            console.info("");
        },
        onEditableSave: function (field, row, oldValue, $el) {
            if (row.POWER.length == 1) {
                if (row.POWER[0] == "query") {
                    row.POWER = "{ "query": true, "update": false }";
                }
            } else {
                row.POWER = "{ "query": true, "update": true }";
            }
            $.ajax({
                type: "post",
                url: "/Project/ProjectPower/Add",
                data: row,
                dataType: "JSON",
                success: function (data, status) {
                    if (data) {
                        layer.alert("");
                    } else {
                        layer.alert("");
                    }
                },
                error: function () {
                    layer.alert("");
                },
                complete: function () {

                }

            });
        }

    });
    
    
     function del(id) {
    var r = confirm("");
    if (r) {
        $.ajax({
            type: "GET",
            url: GetRootName() + "/Project/Project/DelPower",
            data: { ID: id },
            dataType: "json",
            cache: false,
            async: false,
            success: function (data) {
                $("-sharppowerTable").bootstrapTable("remove", {
                    field: "ID",
                    value: id
                });
            }
        });
    }

}