jquery - bind event only works once

Question

I have these buttons like so:

<input type="button" id="deleteButton" name="deleteButton" class="btn btn-default deleteButton" value="Delete">

I say these because there are multiples (about 30 of them)

and I have this bind event:

$(".deleteButton").bind("click", function () {

        var id = $(this).parent().parent().find('input[name=ID]').val();

        $.ajax({
            url: "/DepositLog/DeleteItem",
            type: "POST",
            data: { ID: id, Usr: $("#Usr").val() },
            success: function (data) {

                MVCGrid.reloadGrid('DepositLogGrid');


            }
        });

    });

And it only works the first time I use it, after that it does not work at all, I have tried using the id as the selector, I have also tried an on event and that also did not work $(".deleteButton").on("click", function () {

What am I doing wrong?

I'm guessing the unnamed `MVCGrid` reloads the grid on `reloadGrid()` so any buttons that had events will no longer exist. You can either re-bind your events or use event delegation: `$(document).on("click" , ".deleteButton", function...` (which seems more appropriate in this case). — freedomn-m, Dec 10 '19 at 14:57
Also note that `.bind` was deprecate *10 years ago* - you should use `.on()` (but they're essentially the same until .bind is removed completely) — freedomn-m, Dec 10 '19 at 14:57

jquery - bind event only works once

0 Answers0