单击“取消”按钮后未定义剑道确认

Question

我看到了类似的问题，但很遗憾没有找到我想要的答案。

点击“更新”按钮时，我需要在特定条件下显示剑道确认对话框：

<button class="k-button k-primary" id="btnSave" type="button"  @*name="action:Save"*@ onclick="CheckSplitCondition()">Update</button>

function CheckSplitCondition()
{
    var newResolvedAmount = $('#ResolvedAmount').val();

    var isSplit;
    var diff = @Model.Amount - newResolvedAmount;
    var msg = "Difference between Resolve Amount and Ticket Amount is:" + diff + ".\nThis Amount is going to be put in newly created ticket.\nPress 'OK' to proceed, press 'Cancel' otherwise.\n";

    var dispResult = $("#displayResults");
    if ((Math.abs(newResolvedAmount) <= Math.abs(@Model.Amount)) && newResolvedAmount != 0) {
        //$("#displayResults").css("display", "block");
        $("#displayResults").kendoConfirm({
            width: "400px",
            title: "Alert",
            closable: true,
            modal: true,
            content: 'Are you sure?',
            okText: "OK"
        }).data("kendoConfirm").result.done(function () { SaveData(); }).fail(function () { alert('2') });

    }
    else {
        SaveData();
    }
}

点击“取消”后，确认框没有显示，我有JavaScript error告诉

“无法获取未定义或空引用的属性‘结果’”

不知道为什么会这样。

Answer 1

Kendo Confirm 是基于 Kendo Dialog 的，根据documentation，它会在销毁 DOM 时从 DOM 中移除 HTML 元素：

摧毁

如有必要，销毁对话框及其模态覆盖。从 DOM 中删除小部件 HTML 元素。

这就是为什么它只在第一次工作，而您在第二次传递时收到一个空引用，因为<div> 不再存在。这种行为是典型的已被破坏的 Kendo 小部件。

最快的解决方案是调用kendo.confirm() 方法，如this demo。不幸的是，这是一个非常简单的辅助方法，它只允许您将消息文本指定为参数。

或者，您可以使用 jQuery 每次创建一个新的<div>，然后将其转换为像这样的对话框（保留完全自定义对话框的灵活性）：

var confirmDialog = $('<div />').kendoConfirm({
    content: "Are you sure that you want to proceed?",
    title: "Custom Title"
}).data('kendoConfirm').open();

confirmDialog.result.then(function () {
    kendo.alert("You chose the Ok action.");
}, function () {
    kendo.alert("You chose to Cancel action.");
});

希望这会有所帮助。