• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 337
  • Last Modified:

How can I remove a dynamic data-callback from a button?

Hello all,

I have some code I did not create but what is essentially is there is a dynamic window that gets created and button id's are being passed to this javascript function.   In that function the buttons are being dynamically created for the window such as below.  I need to remove it as what happens is the function gets called more than once the click events get fired multiple times.   Any idea how to delete this?  I try removing the button such as:

 $("#" + btnId).remove();

Before creating it again as it's going into the DOM but this seems to not fix the issue.  Here is the code and essentially I need to kill the buttons first.

   lms.ModalButtonDialogWithRemoteContent = function (obj) {

        if (LMS.IsUndefinedOrNull(obj) || LMS.IsUndefinedOrNull(obj.dialogId) || LMS.IsUndefinedOrNull(obj.buttons) || LMS.IsUndefinedOrNull(obj.content)) {
            console.log("One or more critical properties was not defined, exiting...");
            return null;

        var buttonsHtml = '<div class="buttonDialogWrapper">REPLACE</div>';
        var buttonBuffer = '';

        for (key in obj.buttons) {
            var attr = 'data-callback="' + key + '"';
            var btnId = "kWinBtn" + key;

            $("#" + btnId).remove();

            buttonBuffer += ['<button id="' + btnId + '" class="k-button"', ' ', 'value="', key, '" ', attr, '">', key, '</button>'].join('');

            var selector = '[' + attr + ']';

            var func = obj.buttons[key];

            if (LMS.IsUndefinedOrNull(func) || typeof func !== "function") {
                func = function () {

            $("body").on("click", selector, func);

        buttonsHtml = buttonsHtml.replace(/\bREPLACE\b/, buttonBuffer);

        var template = '<div><div style="text-align:center">CONTENT</div><div style="text-align:center">BUTTONS</div></div>';
        var body = template;

        body = body.replace(/\bCONTENT\b/, obj.content);
        body = body.replace(/\bBUTTONS\b/, buttonsHtml);

        var dialogPlaceholderSelector = "#" + obj.dialogId;
        var dialogBody = $(dialogPlaceholderSelector);

        if (dialogBody.length == 0) {
            var htmlStr = '<div id="' + obj.dialogId + '"></div>';


            actions: ["Close"],
            draggable: true,
            height: obj.h || 'auto',
            width: obj.w || 'auto',
            modal: true,
            pinned: true,
            resizable: true,
            title: obj.title || "Message",
            visible: false,
            deactivate: function () { this.destroy(); },
            refresh: function () { this.center(); }

        return $(dialogPlaceholderSelector).data("kendoWindow");


Open in new window

1 Solution
Michel PlungjanIT ExpertCommented:

 $("body").off("click").on("click", selector, func);

But I suggest you narrow your selection to the nearest container and not the whole body
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now