Event handling within the JavaScript object

Question

I've created some kind of JavaScript object with the such design pattern:

var MyObject = (function(){

    var element;
    var config = {
        // Defaults...
    };

    function initialize(id, options){
        element = $(id);
        config = $.extend(config, options);
    }

    function method(){
        // Some code...
    }

    element.on('click', function(){
        // Some actions when clicked on element...
    });

    return {
        initialize: initialize,
        // Other public methods...
    };

})();

And that's how object is initialized:

MyObject.initialize('#someId');

Script works great, however an error occurs, when I try to add some events for element. As I realized, an anonymous function (function(){ ... })(); is executed immediatelly, but initialization of variable elementcomes after.

So, how can I implement an event handling exactly for this JavaScript object pattern?

Thanks!

Attach the event in the initialize method.

Matt
– Matt

2013-04-30 19:49:53 +00:00
Commented Apr 30, 2013 at 19:49 — Matt
– Matt, Commented Apr 30, 2013 at 19:49

Vivin Paliath · Accepted Answer · 2013-04-30 19:50:03Z

3

You should be calling on inside the initialize function. Since the outer function is executing immediately (as you realized yourself), element is undefined. So you should only be calling on on it, after the variable has been defined:

function initialize(id, options){
    element = $(id);
    element.on('click', function() {
        ...
    });   

    config = $.extend(config, options);
}

answered Apr 30, 2013 at 19:50

Vivin Paliath

95.8k42 gold badges230 silver badges302 bronze badges

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

Comments

Ben McCormick · Accepted Answer · 2013-04-30 19:51:12Z

2

Stick it in the initialize method.

function initialize(id, options){
    element = $(id);
    config = $.extend(config, options);


    element.on('click', function(){
        // Some actions when clicked on element...
    });
}

answered Apr 30, 2013 at 19:51

Ben McCormick

25.8k12 gold badges56 silver badges71 bronze badges

Collectives™ on Stack Overflow

Event handling within the JavaScript object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related