Kendo 带有 <form> 标记的对话操作

Question

我对kendo有些困惑。希望大家帮帮我

    $("#dialog").kendoDialog({
        width: 800,
        height: 600,
        title: "Check Information",
        visible: false,
        actions: [
            { text: 'NO' },
            { text: 'OK', primary: true, action: onSubmit},
        ]
    }).data("kendoDialog");

    $("#openButton").click(function(){
    var dialog = $("#dialog").data("kendoDialog");
    dialog.open();
    });

最上面是 Kendo 代码，此表单将在检查验证器后提交。我的想法是“打开对话框，我想点击”确定“调用操作：onSubmit然后执行方法$（“form”）。但是当我点击按钮提交表单（#openButton）时。它只是打开了一个对话框，它还提交了 $("form").submit(function(event)." 大家能帮我解决一下吗。

    function onSubmit(e) {
        $("form").submit(function(event) {
            event.preventDefault();

            if (validator.validate()) {
                validationSummary.html("<div class='k-messagebox k-messagebox-success'>Hooray! Your tickets has been sent!!!</div>");
            }
            else {
                validationSummary.html("<div class='k-messagebox k-messagebox-error'>Oops! There is invalid data in the form.</div>");
            }
        });
    }

Answer 1

对话框是以编程方式打开的 window。我这样做的方式是，如果表单已提交，则打开对话框，然后让对话框处理操作。这是 Kendo dialog.

的 MVVM 版本

HTML

<div id="logout_dialog" data-role="dialog" data-title="Logout Confirmation" data-closable="false"
    data-content="Are you sure you want to logout?"
    data-actions="[{ text: 'Yes', action: logout_dialog_yes, primary: true },
    {text:'No', action: close_dialog}]" data-visible="false">
</div>

JavaScript

var logout_dialog = $("#logout_dialog").data("kendoDialog");

logout_dialog.open();

function logout_dialog_yes() {
    APP.models.main_splitter_header.logout_click_yes();
    return;
}

function close_dialog() {
    return true;
}

Kendo 带有 <form> 标记的对话操作

Kendo Dialog Action with <form> Tag

jquery

kendo-ui