Javascript OOP: loosing "this" and take last object created instead (jsfiddle sample)

Question

here is the code: http://jsfiddle.net/j5LtR/6/

this code is a confirm popin message, on click on "click here" link, it create a new confirm popin message it works well until 2 Object of this popin are created.

trouble: the close button on header bar dont act as it should: it close last opened confirm popin instead of "this" opened confirm popin

to test it in the jsfiddle click 2 times on "click here !!" link, this will create 2 popin (you can move them case they will be superposed)

the bug seem to be there:

    //close btn
    $('<a>',{
        class   : 'close',
        text    : 'X',
        title   : 'close',
        click   : function()
                    {      
                        /*=============close btn !!!!=================*/
                        alert('CLOSE !');
                        _that.close();
                    }

but i do almost samething in the inherit class, and it works ....

nBtn=$('<a>',{
    class   : 'btn-n',
    text    : 'no',
    title   : 'no button',
    click   : function()
                {
                    /*=============close btn !!!!=================*/
                    alert('NO !');                          
                    _that.close();
                }
    });

if someone have an idea why the top close button act like that, it could help me, thanks !

Answer 1

Your case is an example that show how global variables are bad. Here's you're fix:

var _that=this;

In your setPanel() function -> http://jsfiddle.net/j5LtR/7/

Note that you should always use var.

Details: while defining _that = this;, you overwrite existing definition of _that in the whole JS application each time this instruction is executed, whereas var _that = this; will restrict _that in the current scope (~parent function and "sub-functions" of this one).