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

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

• javascript
• jquery
• kendo-ui

• They are firing twice because you are binding to them twice. Either the elements don't actually get destroyed, or you are running the code you posted more than once on each click. – Kevin B Commented Nov 30, 2012 at 19:42
• 1 LOL, no offense, but this is what happens when some silly's think they'll reinvent the wheel. Honestly, I only ever stray from jQuery Basic to get jQueryUI (tried tested and provided from the same people as jQuery) and jQueryMobile(again, same people). Sometimes I might grab the occasional plugin, but for most things, the basic jQuery Libs have everything you need and function as expected. It looks like kendo is trying to copy jQueryUI's model dialgo function, which is also found in jQueryMobile. Just a hint, that same code, with jQueryMobile's .dialog, will work as expected every time. – SpYk3HH Commented Nov 30, 2012 at 19:43
• Thanks @SpYk3HH, that's good to know. jQuery's still relatively new to me & my boss asked us to use this Kendo UI. Going forward, I'll look more into jQuery UI. – goalie35 Commented Dec 3, 2012 at 2:09

1 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.