How to remove Click listener

[rafacla]

Hello guys,

First of all thanks for the great extension, I'm probably having problem maybe for not using the extention in the most optimal way, but I'm having a hard time trying to figure out a solution.

I have a table in a list view that user can select items in checkbox and eveytime user toggles a checkbox, there's a javascript that assigns the modalForm with an uptaded form_url, see below:

$(':checkbox').change(function(){
    var checked = false;
    var checked_ids = ""
    $(':checkbox').each(function() {
      if (checked != true && this.checked) {
        checked = true;
      }
      if (this.checked) {
        if (this.id != "select-all") {
          checked_ids = checked_ids + this.id + ",";
        }
      }
    });
    if (checked) {
       $("#edit_button").show()
    }else{
      $("#edit_button").hide()
    }
    let url_string = "{% url 'banking:transaction_delete' 0 %}"
    url_string = url_string.slice(0, -2) + checked_ids.slice(0, -1) + "/"
    
    modalForm(document.getElementById('deleteTransactions'), {
      formURL: url_string,
      modalID: "#modals-here",
      isDeleteForm: true,
    });

So the problem here is that everytime I call the "modalForm" function it adds a new event handler to my deleteTransactions button, the problem is, I can't remove this listener without having the original handler that was used by this.

So, is there any way I'm not seeing to remove the modalForm click handler?
As I'm kind new to Django itself, there's a better way to achieve this behavior?

Thanks!
Rafael

[rafacla]

Dears, I found a solution, but adjusting the script "bootstrap5.modal.forms.js" as the following:
Original version:

const modalForm = function(elem, options) {
    // Default settings
    let defaults = {
        modalID: "#modal",
        modalContent: ".modal-content",
        modalForm: ".modal-content form",
        formURL: null,
        isDeleteForm: false,
        errorClass: "is-invalid",
        asyncUpdate: false,
        asyncSettings: {
            closeOnSubmit: false,
            successMessage: null,
            dataUrl: null,
            dataElementId: null,
            dataKey: null,
            addModalFormFunction: null
        }
    };

    let settings = {...defaults, ...options}

-    elem.addEventListener('click', () => {
-        modalFormCallback(settings);
-    })
+    elem.clickHandler =  () => {
+        modalFormCallback(settings);
+    };
+    elem.addEventListener('click', elem.clickHandler)
    return elem;
}

this way I can retrieve the current click handler in the button from my script and remove it before adding a new one.