CODEWITHSUNDEEP
jquerykendo-ui
a_mastrakov
a_mastrakov

Reputation: 41

Kendo ui click event fires multiple times

i have problem while using kendo ui dialog window. When i open kendo dialog window second time, and click accept button, event fires two times, next time it fires three times and so on. There is working example http://jsfiddle.net/T89mG/74/. Where i made a mistake?

    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();
            });
    })
);

Upvotes: 1

Views: 3906

Answers (3)

VnDevil
VnDevil

Reputation: 1391

follow CodingWithSpike, I was edit your code and worked:

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();
        });

Upvotes: 0

CodingWithSpike
CodingWithSpike

Reputation: 43698

The dialog widget's DOM elements are created when you call .kendoWindow(), but every time you click your button to open the window, you add another .click() handler to the buttons in the window. Those DOM elements aren't removed when the window is closed. They are just hidden. So you are adding multiple click handlers to the same DOM elements.

You should move:

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

Outside of your click handler for the open window button. Just do it once after the call to .kendoWindow()

Upvotes: 2

Vivek Parekh
Vivek Parekh

Reputation: 1085

Sounds like you should initialize your dialog only once (create it and add your handlers). Then every time you need the dialog to show you only call your

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

line of code. It looks like each time you go to open the dialog its adding a new click hanlder and the previous handlers and the new handler will all be called on the click event.

Stolen from here to help :)

Upvotes: 1

Related Questions