adding click function to custom object

[Marius Miliunas]

I'm trying to add a click function to my object. The way i have it now in bold is how I saw someone else use it, it doesn't work. I tried using jquery's bind('click') and this.div.onclick but it runs the function right away upon instantiation.

How can i get this to run only when clicked?

function bubble(id,title,description,year,bubbleIcon,icon,source,length) {//art object from xml
this.id = 'bubble' + id;
this.title = title;
this.descrip = description;
this.year = year;

this.div = document.createElement('div');
$(this.div).addClass('icon');
this.div.id = 'iconDiv' + id;

this.bubble = document.createElement('img');
this.bubble.id = 'iconBubble' + id;
this.bubble.src = bubbleIcon;

this.icon = document.createElement('img');
this.icon.id = 'icon' + id;
$(this.icon).addClass('hidden');
this.src = icon;

this.source = '<img src="' + source + '" id="fullImg' + id + '" />';
this.length = length;

this.timer = null;
this.interval = 10;
var _this = this;

$('#content').append(this.div);
$(this.div).append(this.bubble).append(this.icon)
.css({ marginTop : (Math.random() * ((bHeight * .5) - (bHeight * .15))) + 125 + 'px',
marginLeft : (id * 250) + 125 + 'px' });
bubbleArray.push(this);

this.div.click(function() {
_this.alertMsg();
});

}

bubble.prototype.alertMsg = function() {
alert('been clicked ');
}

[toicontien]

Change:

this.div = document.createElement('div');

To

this.div = jQuery(document.createElement('div'));

The line:

this.div.click(function() {...})

Is calling a method on a jQuery collection, but this.div refers to a raw DIV tag, not a jQuery wrapped DIV tag.

[Marius Miliunas]

Thanks that works, is there a tutorial or an article that explains what you can do with the jQuery() tag because half my code is regular javascript half jquery and I'm clueless if it should all be one or the other.

[toicontien]

Two great resources:

http://docs.jquery.com/Main_Page

http://api.jquery.com/