CODEWITHSUNDEEP
javascriptjqueryeventsbackbone.js
Evan
Evan

Reputation: 6115

How can I have a dynamically allocated DOM event fire as well as a backbone event?

I want to have a loader attached on my buttons on mousedown on every page.

I have a function that fires after the layout renders and passes in the top level view, then grabs every button and attaches a mousedown event on it :

attachGlobalButtonEventHandler : function(view){
        view.$el.find('button.viewtag, button.newtag').on('mousedown', function(){
            var $target = $(this);

            $target.addClass('activated');
            $target.prop('disabled', true);
        });
    }

This works fine, but the problem is my backbone events on the buttons are not getting fired, which looks like:

events : {
            'click .newtag' : 'gotoCreate'
        },
        gotoCreate : function(evt) {
            evt.preventDefault();

            app.router.navigate('somewhere', true);
        }

If I remove the attachGlobalButtonEventHandler, then the click on newtag fires fine, but does not fire at all if the handler is attached. How can I make sure the backbone click event will fire as well?

Upvotes: 3

Views: 240

Answers (1)

Marc Greenstock
Marc Greenstock

Reputation: 11688

The problem here is the disabled property and the order events are executed.

The mousedown event happens before the click event and in the mousedown callback you disable the button, thus removing the click event entirely.

Check this jsFiddle out. If you comment out the line $(this).prop('disabled', true); then the click event will fire.

By adding a setTimeout you can effectively execute it on the next tick, see this jsFiddle for details.

Edit: I just noticed @codemonkey had added a comment suggesting the same thing.

Upvotes: 6

Related Questions