How to define an event that changes an element that has a different event?

Question

Apologies for the vague title, it's kind of hard to explain in a line...

In any case, let's say I have a button with an action as defined by the data-action property. When the user clicks said button, something happens, and the button's action will change to its second state.

However, implementing this, I am finding that the event that is defined for that second state gets run automatically after the first state is triggered, as though the "click" persists past the function call and triggers the second event.

Here is a jsFiddle

One click should show the log 'transitioning to "foo"', and a second click should show the log 'transitioning to "bar"', but if you try it out, you'll see that both events are fired.

How can I stop this?

Edit: Thanks Dimitar for the help -

var action = ((this.retrieve('action', 'foo') != this.getProperty('data-action')) ? 'bar' : 'foo' );
if (action == 'foo') {
    console.log('executing "foo"');
    this.store('action', 'bar');
}
else {
    console.log('executing "bar"');
    this.store('action', 'foo');
}

Answer 1

like lorenzo said, when you delegate it and change the property, which is used as the delegation identifier, it sounds like an anti-pattern to me. I don't think that adding a delay is a good pattern either.

Either use a second property that you change on the element instead, or better yet, change a var that keeps state in element storage after initial event reads it from a property for performance.

$(document.body).addEvents({
    'click:relay([data-action=foo])': function() {
        this.store("action", ((this.retrieve("action") || this.get("data-action")) === 'foo') ? 'bar' : 'foo');
        this.set("html", 'State + ' + this.retrieve("action"));
    }
});

Answer 2

Nice situation :)

I saw that changing the order of event handlers declaration solve the problem for the first click (and postpone it for the next ones).

And, I think there is no issue on Mootools: you click the button, the event bubbles up the DOM to the body, the body check all its attach events (delegated, in your case) and stop at first because it finds a match for [data-action="bar"]. And the related function is executed. The body now continues to check for other delegation matches (it have no reason to stop!), and finds the second one [data-action="foo"] matching again.

I'm afraid you cannot avoid that without using some flag/state variable or delaying the function execution. I think this last one is the best, or at least the most concise, solution (if applicable, I don't know if the delay can cause you problems). If you delay the function execution a bit (in ms), you just jump over the delegation event checking. Demo here.