Question

使用kendo ui对话框窗口时遇到问题。当我第二次打开kendo对话框窗口，然后单击“接受”按钮时，事件将触发两次，下次触发三次，依此类推。有工作示例http://jsfiddle.net/T89mG/74/。我犯了什么错误？

    addToQueueWindow = $("#AddToQueueWindow").kendoWindow({
    modal: true,
    visible: false
}).data("kendoWindow");

$(document).ready(
     $("#showAddMessageDialog")
    .button()
    .click(function (e) {
        addToQueueWindow.center().open();
        addToQueueWindow.wrapper
            .find(".add-confirm,.add-cancel")
            .click(function (e) {
                if ($(this).hasClass("add-confirm")) {
                    $.ajax({
                        url: '@Url.Action("AddToQueueHandler", "ManageMessageState")',
                   type: 'POST',
                   data: { Id: $("#MessageidInput").val() },
                   complete: function (event, ui) {
                       $("#QueueContentGrid").data("kendoGrid").dataSource.read();
                   }
               });
           }
                addToQueueWindow.close();
            });
    })
);

Answer 1

当您调用.kendoWindow()时，会创建对话框窗口小部件的DOM元素，但每次单击按钮打开窗口时，都会在窗口中的按钮上添加另一个.click()处理程序。窗口关闭时，不会删除那些DOM元素。它们只是隐藏起来。因此，您要向同一个DOM元素添加多个单击处理程序。

你应该搬家：

addToQueueWindow.wrapper
        .find(".add-confirm,.add-cancel")
        .click(function (e) {

打开窗口按钮的单击处理程序之外。只需在调用.kendoWindow()

后执行一次

Answer 2

听起来你应该只对对话框初始化一次（创建它并添加你的处理程序）。然后，每当您需要对话框显示只打电话给您

时

kendoWindow.data("kendoWindow").center().open();

代码行。看起来每次打开对话框时都会添加一个新的click hanlder，并且会在click事件中调用前面的处理程序和新的处理程序。

从 here 中偷来帮助：）

Answer 3

关注CodingWithSpike，我编辑了你的代码并且工作了：

addToQueueWindow = $("#AddToQueueWindow").kendoWindow({
        modal: true,
        visible: false
    }).data("kendoWindow");

addToQueueWindow.wrapper
                .find(".add-confirm,.add-cancel")
                .click(function (e) {
                    if ($(this).hasClass("add-confirm")) {
                        $.ajax({
                            url: '@Url.Action("AddToQueueHandler", "ManageMessageState")',
                            type: 'POST',
                            data: { Id: $("#MessageidInput").val() },
                            complete: function (event, ui) {
                                alert("Complete");
                            }
                        });
                    }
                    addToQueueWindow.close();
                }).end();

$("#showAddMessageDialog")
            .click(function (e) {
            addToQueueWindow.center().open();
        });

Kendo ui click事件多次触发

3 个答案: