JavaScript function to bind events specified in object

Question

I'm creating a function that gets in input a JavaScript object with this format:

var input = {
    'selector1' : {
        'event1'    : function(element,value){
            // ...
        },
        'event2'    : function(element,value){
            // ...
        },
        ...
        'eventN'    : function(element,value){
            // ...
        }
    },
    'selector2' : {
        'event1'    : function(element,value){
            // ...
        },
        'event2'    : function(element,value){
            // ...
        },
        ...
        'eventN'    : function(element,value){
            // ...
        }
    }
}

My function bind the events this way:

function event_binder(events_fns){
    for(sel in events_fns){
        for(ev in events_fns[sel]){
            $(sel).on(ev,function(){
                console.log(sel+'+'+ev);
                var th = $(this);
                var func_to_call = events_fns[sel][ev];
                func_to_call(th,th.html());
            });
        }
    }
}

but when I run it, it shows that every event's been bound to the last event.

I created a jsFiddle for better explain my problem: http://jsfiddle.net/Polmonite/6rRgr/

As the console.log suggest, it seems that the event binding always use the last function in the object. If I'm interpreting right, it would seems that the evaluation of the .on function only happens at the end, so it use the last values of sel and ev variables (a scoping problem), but I don't quite understand how to fix it.

EDIT: I need to specify one thing: I want to create a working version of the event_binder function, not a working version of the jsfiddle, which is just an example.

@Anton: My objective is to create a working version of the function 'event_binder' specified in the question. Maybe it wasn't clear, sorry about that. I'll edit the question. — Polmonite
– Polmonite, Commented Jan 4, 2013 at 11:02

pimvdb · Accepted Answer · 2013-01-04 11:07:03Z

2

The issue is scope - there is only one sel and ev variable in the whole function, which is overwritten each time. To create a new scope (with its own variables), you have to wrap them in their own function. Luckily, jQuery provides an iterating function that you can pass a function to, so that you don't have this issue: $.each. See: http://jsfiddle.net/6rRgr/3/.

$.each(events_fns, function(sel, funcs) {
    $.each(funcs, function(ev, func) {
        $(sel).on(ev,function(){
            console.log(sel+'+'+ev);
            var th = $(this);
            func(th,th.html());
        });
    });
});

answered Jan 4, 2013 at 11:07

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Polmonite Over a year ago

I see. Thank you very much for the explanation and the code example! ;)

Collectives™ on Stack Overflow

JavaScript function to bind events specified in object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related