jQuery event trigger + constructor pattern

Question

I create an object with "new", initialize it and subscribe to it's event with $(this).trigger({type:"myevent", field1:val1}), like (here - jsfiddle ), and it works:

var Users = function (selector) {
        var that = this;
        var myButton;

        //function to trigger
        function add(name) {
            console.log("before trigger for: $('"+selector+"') with ["+name+"]")

            $(that).trigger({
                type: "user-added",
                name: name,
                date: new Date(),
            });
        }

        $(selector).click(function () {
            add($("#name").val());
        });
    };

My problem is that I am interested to pass the selector in a separate function init (another jsfiddle):

        var Users = function () {
            var that = this;

            var mySelector;

            //function to trigger
            function add(name) {

                console.log("before trigger for: $('" + mySelector + "') with [" + name + "]")

                $(that).trigger({
                    type: "user-added",
                    name: name,
                    date: new Date(),
                });
            }

            function init(selector) {
                mySelector = selector;
                $(selector).click(function () {
                    add($("#name").val());
                });
            }

            return {
                init: init
            };
        };

In this case the code is breaking:

When the event is triggered, the that object the function sees looks like Users {},

and not updated like in the working sample: Users {jQuery11111210404012482791554801678404482030027643403015099466: Object},

so jQuery does not trigger the event.

Sure I can set that in init(), or initialize the object in the constructor to solve the problem, but it drives me crazy why the "that" member does not get hooked up to the actual object if I set it in the constructor and hookup to the event in an inner function, but does work if I hookup to the event in the same function.

Thanks.

"that object the function sees looks like Users {}" - well, that's what it is. What else would you have expected? — Bergi
– Bergi, Commented Apr 23, 2014 at 16:53

Bergi · Accepted Answer · 2014-04-23 17:02:02Z

2

        return {
            init: init
        };

You shouldn't return anything from a constructor that is being invoked with new. The this object which your that refers to is an empty User instance, but not the plain object with the init function you returned, assigned to u1 and installed the handlers upon.

Instead of returning that object literal, you should just do

         this.init = init;

edited Apr 23, 2014 at 17:02

answered Apr 23, 2014 at 16:56

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

1 Comment

alex440 Over a year ago

Great. Thanks. Should brush up my knowledge on this matter, I see I developed some cargo cult here...

DoctorLouie · Accepted Answer · 2014-04-23 17:03:35Z

0

First, in passing in your selector, try:

var u = new Users($("#but1"));

As for passing selector on the outside, set:

var mySelector;

On the outside of the 'Users' function, this way any other function can overwrite the value of the variable, as well as keep its last value regardless of how many times you run the 'Users'. Then set your selector dynamically as such:

mySelector = $("#but1");

edited Apr 23, 2014 at 17:03

answered Apr 23, 2014 at 16:41

DoctorLouie

2,6741 gold badge18 silver badges23 bronze badges

3 Comments

alex440 Over a year ago

not sure I understand you (By the way I tried the first 2 edits of the answer and it didn't work). do you mean set {return selector:mySelector} and then hookup to mySelector.click()? in this case it won't work, cos the hookup is in the init function, I can't do it in the constructor.

DoctorLouie Over a year ago

Here I forked over your JSFiddle, with my changes in tow, hope it works, I just re-updated it: jsfiddle.net/9JYQW/3

alex440 Over a year ago

well, I don't see the changes, it seems the same and still not working... Anyway Bergi gave the correct solution - we should've assign the init to this, and not return... I accepted his answer... Thanks anyway! Have a great day.

Collectives™ on Stack Overflow

jQuery event trigger + constructor pattern

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related