Question

This should be simple, but for reason I can’t quite fathom it doesn’t work and – more importantly – I can’t find the right question to ask of Google!

What I want to do is prototype an event binder for a JS class as per below, what actually happens is nothing, unless I call .bind() directly on the box object.

function Box()
{
    this.Width = 200;
    this.Height = 200;
    this.WrapperClass = "boxWrapper";
    this.TitleClass = "boxTitle";
    this.ContentClass = "boxContents";
    this.Title = "This is a box";
    this.Content = "This is some box contents";
}

Box.prototype.Html = function()
{
    var box = $('<div></div>').addClass(this.WrapperClass);
    box.append($("<div></div>").addClass(this.TitleClass).append(this.Title));
    box.append($("<div></div>").addClass(this.ContentClass).append(this.Content));
    box.width(this.Width);
    box.height(this.Height);
    return box.outerHTML();
}

Box.prototype.Bind = function(event, eventDelegate)
{
    this.bind(event, eventDelegate);
}

function clickDelegate(message)
{
    alert(message);
}

$(document.ready(function() {
    var box = $(new Box().Html());
    box.Bind('click', clickDelegate('text'));
    $('body').append(box);
}

Answer 1

You have to append box before binding events.

I have created a little fiddle starting with your code and debugging it.

FYI : jQuery object has no method outerHTML, So I’ve embedded the newly created div in one other.

I’ve made several changes to your code that’s why I’m not posting it here.