javascript - jQuery - trigger not produce the expected result

Question

In my app, while page load i initiate my init function for 3 things,

1. trigger and sending a page no. (i would like to pass page default as 1)

2. when trigger done, i want to hear that so i am listening

3. again, a user can insert / edit the page number (text box) so i am adding a listener to function.

but when function start i am consoling a object but i am getting result as undifined.

what is wrong here:

var docLoader = function (params) {

    window.container = window.container || $("#tenderContent");

    return {
        init : function () {
            this.cachePages = {};
            $(document).on("newMessage", this.onPageChange);
            $.event.trigger({
                type: "newMessage"
            });
        },

        onPageChange : function (e) {
            console.log(this.cachePages) //undefined why?
        }
    }
}

html page :

<script>
    docLoader().init();
</script>

I am new to de-coupled approach any one help me with details please?

Answer 1

It's because you lose the this context. jQuery passes the DOM element as the context, not whatever the original context was.

You need to bind the context of the function to your existing this:

$(document).on("newMessage", this.onPageChange.bind(this));