Kendo ui点击事件多次触发答案

【问题标题】：Kendo ui click event fires multiple timesKendo ui点击事件多次触发
【发布时间】：2014-02-24 07:45:02
【问题描述】：

我在使用剑道 ui 对话窗口时遇到问题。当我第二次打开剑道对话框窗口并单击接受按钮时，事件会触发两次，下一次触发三次，依此类推。有工作示例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();
            });
    })
);

【问题讨论】：

标签： jquery kendo-ui

【解决方案1】：

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

你应该搬家：

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

在打开窗口按钮的单击处理程序之外。只需在致电.kendoWindow() 后执行一次

【讨论】：

【解决方案2】：

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

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

代码行。看起来每次打开对话框时都会添加一个新的点击处理程序，并且之前的处理程序和新的处理程序都将在点击事件上被调用。

盗自 here 以提供帮助 :)

【讨论】：

我只初始化对话窗口一次，然后返回给 addToQueueWindow 变量。

【解决方案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();
        });

【讨论】：