Issues with removing a mouse event binding

[Madmicra]

So scene setting....

I'm relatively new to Pixi JS but am an experienced developer (although be it in Flash not JS). I've managed pretty well so far and am in the process of converting another very basic game from Flash to JS as I have before. 

I've created a button class that aside from a few data options like colour etc, passes 2 functions in the constructor. 1) bindFunction and 2) clickFunction. The button has a usual 3 state system of Up, Over and Down; which each have their own image.

The bind function is used to respond to all the following events :  mousedown, touchstart, mouseover, mouseup, mouseout, mouseupoutside in the format : 

this.on('eventType', this.bindFunction.bind({dataobject}));

In the bind function it reads the event type and then sets the appropriate image for the state.

The dataobject passed to the bind function contains the other mentioned function clickFunction. In the bind function the appropriate click events then call the clickFunction. All make sense? Then stay with me.

So I wished to have these buttons changeable on the fly i.e. the clickFunction and label could be changed, but I seem to be having issues unbinding the clickFunction part. I've created 2 functions to add and remove the event listeners and numerous functions to do the inbetween parts like update the label and clickFunction. When I run this, I can see it disable the buttons, see the new stored function and labels (via log), but when I then click it with the new label/function applied, it still calls the original function as well. I'm removing the function with the following format :

this.off('evenType', this.bindFunction);
this.clickFunction = null;
this.bindFunction = null;

I've tried multiple ways of writing this and am still unable to remove the data passed from the original binding. Any thoughts? 

Can provide more details if necessary but hope this is detailed enough. Essentially the steps currently are:

1) Button bound with bindFunction1 and passed clickFunction1 

2) Button clicked and bindFunction1 is called and it calls clickFunction1

3) Then clickFunction1 removes bindFunction1 from button and then nulls bindFunction1 and clickFunction1 on button

4) Button updated with bindFunction2 (which is actually bindFunction1 - only doing as having issues and thought removal and reset might help) and clickFunction2

5) Button bound with bindFunction2 and passed clickFunction2

6) Button clicked and bindFunction2 is called and it calls clickFunction2 but also clickFunction1 which it should not.

I presume that there is some sort of ordering or way I'm doing this (context) that is obviously not removing clickFunction1 from the instance. I have checked it with just remove and no reassign, it does remove the listener but I don't think it's removing the object passed bind correctly. I've googled a lot for this and not found anything conclusive, hence posting this. I'm sure it's something glaringly obvious too hehe. Any assistance would be greatly appreciated. I'd really rather not have to clear and recreate the buttons, when it's only a label and click function that need changing.

 

UPDATE: Yes I know I can solve this by separating the click function onto a separate event handler (I know this works), but this it more being interested how binding can work (or be troublesome) and reducing the number of handlers to deal with.

[Madmicra]

I believe I know why my original solution didn't work and how to fix it. Yet to test though but believe the solution will work ok. Will update once testing complete, and will present solution if it works.