Question

html:

<div id="mydiv">lol</div>

javascript:

var oWM = new WM();
oWM.Add("mydiv");
oWM.Initialize();

function WM() {
    this.ZIndex = 1000;
    this.Windows = [];
    this.Add = function(id) {
        this.Windows.push(id);
    }
    this.Initialize = function() {
        for (var i = 0; i < this.Windows.length; i++) {
            $("#" + this.Windows[i]).click(function () {
                alert("#"+this.id + ":" + this.ZIndex++);
                $("#" + this.id).css("z-index", this.ZIndex++);
            });
        }
    }
}

when the user clicks on the div i get a “Nan” for this.ZIndex, so my change-zindex-on-click function doesn’t work. Why doesn’t it get recognized and how can i make it work?

I think it has something to do with jquery’s $() function because this.Windows[i] is also undefined inside that block.

http://jsfiddle.net/79sM8/

click on the “lol” div and see what happens

thanks in advance

Answer 1

Because inside of your click event, this is the element you clicked on, not the WM object.

The simplest fix would be to bind the click function’s this value ahead of time:

$("#" + this.Windows[i]).click(function () {
    alert("#"+this.id + ":" + this.ZIndex++);
    $("#" + this.id).css("z-index", this.ZIndex++);
}.bind(this);

---

EDIT – turns out you want to read the id property off of the element that was clicked, so the above probably won’t work in this case since you still need this.id to refer to the dom element’s id.

Definitely learn how to use function.bind, but for this problem, the solution below is what you want

---

Of course this won’t work in IE8 (without a shim) so if that’s a problem, you can just save the this value of your WM object ahead of time and use that in the click handler:

this.Initialize = function() {
    var self = this;
    for (var i = 0; i < this.Windows.length; i++) {
        $("#" + this.Windows[i]).click(function () {
            alert("#"+ this.id + ":" + self.ZIndex++);
            $("#" + this.id).css("z-index", self.ZIndex++);
        });
    }
}