Triggered reload in command button code wires events over and over again...

[jlrolin]

Wrote some code to add a record to the database from an inline row I created in the footer of the Bootgrid. I simply created a "command-add" as a command button, and upon click -- insert record in the database and return to reload the grid (GET from the server to reload the data). When this occurs, the "on" events get wired again, thus creating two inserts. The more times I do it, the more it gets re-wired:

$(document).ready(function () {
        $("#grid-basic").bootgrid({
            ajax: true,
            url: "@Url.Action("GetRoles")",
            formatters: {
                "commands": function (column, row) {
                    return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.role_id + "\"><span class=\"fa fa-pencil\"></span></button> " +
                           "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.role_id + "\"><span class=\"fa fa-trash-o\"></span></button>";
                }
            }
        }).on("loaded.rs.jquery.bootgrid", function () {
            /* Executes after data is loaded and rendered */
            $(this).find(".command-edit").on("click", function (e) {
                alert("You pressed edit on row: " + $(this).data("row-id"));
            }).end().find(".command-delete").on("click", function (e) {
                alert("You pressed delete on row: " + $(this).data("row-id"));
            }).end().find(".command-add").on("click", function (e) {
                $element = $("#add-role-text");
                $("#add-role-text-group").removeClass("has-error has-feedback");

                // Validate element
                if ($element.val() == "") {
                    $("#add-role-text-group").addClass("has-error has-feedback");
                } else {
                    // Text is valid; fire off Save
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("AddRole")", // the method we are calling
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify({ description: $element.val() }),
                        dataType: "json",
                        success: function (data) {
                            $("#grid-basic").bootgrid("reload");
                        }
                    });
                }
            })
        });
    });

Is this a bug or do I need to unhook the hooks before the reload?

UPDATE: I'm assuming this has something to do with the reload re-rendering the buttons, but not the footer, thus I'm wiring the event over and over again.

[philwig]

I'm not clear what your html is, but your analysis looks right: every time you load that grid, you're adding a new click handler. That's not a bootgrid problem and I'm sure you can work out how to avoid doing it.

I just stick one click handler on the grid's click.rs.jquery.bootgrid event at initialization time, then suck the event target out of that and do the business. You need to mod bootgrid a fraction to get the target - there's a ticket I created here for that.

[lcguida]

You are reloading the grid every time you add a new record, right?

 $("#grid-basic").bootgrid("reload");

Which means, the event loaded is being called again.

You should be removing event handlers from the buttons before adding then again:

.on("loaded.rs.jquery.bootgrid", function () {
   //Remove event handlers
   $(this).find(".command-edit").off();
   $(this).find(".command-delete").off();
   $(this).find(".command-add").off();

   $(this).find(".command-edit").on("click", function (e) {
     alert("You pressed edit on row: " + $(this).data("row-id"));
   }).end().find(".command-delete").on("click", function (e) {
     alert("You pressed delete on row: " + $(this).data("row-id"));
   }).end().find(".command-add").on("click", function (e) {
     /* Yout button logic */
   });
});

[omerfarukaslan]

You are reloading the grid every time you add a new record, right?

 $("#grid-basic").bootgrid("reload");

Which means, the event loaded is being called again.

You should be removing event handlers from the buttons before adding then again:

.on("loaded.rs.jquery.bootgrid", function () {
   //Remove event handlers
   $(this).find(".command-edit").off();
   $(this).find(".command-delete").off();
   $(this).find(".command-add").off();

   $(this).find(".command-edit").on("click", function (e) {
     alert("You pressed edit on row: " + $(this).data("row-id"));
   }).end().find(".command-delete").on("click", function (e) {
     alert("You pressed delete on row: " + $(this).data("row-id"));
   }).end().find(".command-add").on("click", function (e) {
     /* Yout button logic */
   });
});

Thank you so much man, in my case "$(".clearFilters").off();" did work. Since this button was on the top of the grid, was not placed in every row.

jobsTable.on("loaded.rs.jquery.bootgrid", function () { $(".clearFilters").off(); $(".clearFilters").click(function() { **** code was here **** }); });