Kendo UI/jQuery click event running multiple times

Question

I'm using telerik's jQuery software called Kendo UI, to create a modal popup window. I'm having a rather odd problem with a Kendo modal popup box, which contains a "Confirm"/"Cancel" confirmation. The first time I open the confirmation window & click either button (Confirm or Cancel), the window works correctly. The 2nd time I open this popup window & click a button, my Kendo's "click" event fires twice. The third time I open the window, the click event fires 3 times, etc. I can't figure out why. It should only be firing once.

Here's my js code. The click function that's firing twice is in both the Confirm & Cancel sections, beginning on the line that reads ".click(function () {" :

var kendoWindow = $("#delete-confirmation").kendoWindow({
    title: "Confirm",
    resizable: false,
    modal: true,
    center: true
});

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

kendoWindow
    .find(".delete-confirm")
    .click(function () {
        kendoWindow.data("kendoWindow").close();
        destroyItem();
    })
   .end();

kendoWindow
    .find(".delete-cancel")
    .click(function () {
        kendoWindow.data("kendoWindow").close();
    })
   .end();

Any idea what I'm doing wrong?

Thanks

Answer 1

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.