Alternative way to use $(element).on('change', () => {})

I have a problem I hope you can help me:

I'm using bootstrap selectpicker which use the onchange event of the element (I think)

I need to add another event handler to the select element, I did and both works right, the problem is that with every certain changes in my page the table that I use reloads all the data and when that happens the table will add that event handler again to the select element and will do the same thing twice (or more)

So, before assignment of the event I tried to use

$('.selectpicker.call').off('change')

But when I do that I remove the event handler of the bootstrap selectpicker too

Do you guys know any other trick that I could use instead of jquery onchange?

Thank you!

Solution

You can use namespaces for the events this way you can distinguish just the events you've added as opposed to other events.

Let's take a very simple example - there is a button with some default functionality (Click me) and we can add more event handlers to it. We also want to clear the event handlers but not break the default functionality:

//assume some code outside our control
$("#clickme").on("click", () => console.log("Default functionality"));


//our code
$("#set_message").on("click", () =>{
  const message = $("#message").val();
  $("#clickme").on("click", () => console.log(message));
});
$("#clear_message").on("click", () =>{
  $("#clickme").off("click");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input id="message" value="add your message here">
  <button id="set_message">Set message</button>
  <button id="clear_message">Clear message</button>
</div>

<div>
  <button id="clickme">Click me</button>
</div>

This doesn't work because the "Clear message" button removes all event handlers - those added by others or not.

Instead, we can namespace events. For example click.myEvent is still a click event but within the myEvent namespace. If we remove click.myEvent it only removes events from that namespace leaving anything else intact. So "Clear message" now only clears our event handlers:

//assume some code outside our control
$("#clickme").on("click", () => console.log("Default functionality"));


//our code
$("#set_message").on("click.myEvent", () =>{
  const message = $("#message").val();
  $("#clickme").on("click.myEvent", () => console.log(message));
});
$("#clear_message").on("click.myEvent", () =>{
  $("#clickme").off("click.myEvent");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input id="message" value="add your message here">
  <button id="set_message">Set message</button>
  <button id="clear_message">Clear message</button>
</div>

<div>
  <button id="clickme">Click me</button>
</div>