How do I prevent event bubbling on subsequent clicks of button?

metadev

Demo url: https://live.datatables.net/gadipiqu/1/edit

I am trying to trigger the verification process for an employee upon clicking the Verify button in the modal. The issue is that upon subsequent clicks, the previous event is not detached and carried on to subsequent clicks (resulting in a loop of alerts). This issue is not present when I do not add the modal confirmation process and directly execute the verify function. I tried adding event.stopPropagation(); upon clicking Cancel or Verify but to no avail.

How do I solve this? Thanks for reading.

metadev

Turns out, I had to remove the event listener inside the event. Refactoring to the code below solved my issue.

$("#modalCloseBtn").on("click", function (event) {
    event.stopPropagation();
    // rest of code
    $("#modalCloseBtn").off("click");
    return;
});

$("#modalVerifyBtn").on("click", function (event) {
    event.stopPropagation();
    // rest of code
    $("#modalVerifyBtn").off("click");
    return;
});

allan

Thanks for the update. Good to hear you've got it working.

Allan