2

I have the following code :

var Modal = Class.extend({
    //--- Default options
    defaults: {
        width: 300,
        height: 200
        // . . . more options
    },

    //--- Initialize the Modal class
    init: function (options) {
        //--- Extend defaults and options
        this.options = jQuery.extend(this.defaults, options);
    },

    //--- Create the Modal
    create: function () {

            // . . . code removed

            var closeButton = document.createElement("div");
            jQuery(closeButton)
                .attr({ "class": "modal_close" })
                .css({ "cursor": "pointer" })
                .live("click", function () {
                    this.closeModal();
                })
                .appendTo(modalHead);

            // . . . more code
    },

    //--- Hide the Modal
    closeModal: function () {
        // TODO : Code to hide the modal
        jQuery("#modal_container").fadeOut(200).remove();
        jQuery("#lean_overlay").fadeOut(200).remove();
    }
});

Now when I in the click event in the create method try to call the delete method i get this error :

this.closeModal(); is not a function

what am I missing here?

EDIT : Changed the hide function to be closeModal just to simplify my question

2
  • 5
    $(this).hide, since this is a DOM object and hide is a jQuery function.
    – nhahtdh
    Nov 21, 2012 at 14:42
  • Edited my question because it is not the jQuery function "hide()" but the one in my class ;o) Nov 21, 2012 at 17:50

3 Answers 3

9

Replace this.hide(); with $(this).hide();

Later edit:

Keep a reference to this before entering .live()

create: function () {
        // . . . code removed

        var closeButton = document.createElement("div");
        var myModal = this; 
        jQuery(closeButton)
            .attr({ "class": "modal_close" })
            .css({ "cursor": "pointer" })
            .live("click", function () {
                myModal.closeModal();
            })
            .appendTo(modalHead);

        // . . . more code
},
2
  • 1
    I guess OP wants to call Modal.prototype.hide not jQuery.prototype.hide. Nov 21, 2012 at 14:54
  • Yes it is the the function in my class I want to call and your suggestion works, but can I somehow set tis in the init function so that it could work throughout the whole class? Nov 21, 2012 at 15:41
0

Try:

.live('click', $.proxy(this, 'hide'))
0

This issue arises from the fact that jQuery has bound the DOM element the event has been raised against to this. To get around this just use the following

.live('click', this.closeModal)

If you want to cache a reference to the current instance of Modal in the init function you can do something like:

init: function () {
    this.me = this;
}

When referencing it just remember to use this.me (not just me).

3
  • You are right, thats what i want to do and it would be nice to be able to set it in the init function but your example does not work. Do you have any other suggestions? Nov 21, 2012 at 15:39
  • Unfortunately you won't be able to use this.me as jQuery will bind this to the DOM element which has been clicked. You can get round this my using something like: .live('click', this.closeModal).
    – jabclab
    Nov 21, 2012 at 16:09
  • Ok, thanks for clearing that. Then I think it's better to do it with a declared variable as mentioned by gabitzish Nov 21, 2012 at 17:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.