Question

Is there any way to bind a mouse event such as ‘mouseover’ to a JavaScript object?

function test(x,y,z){
   this.x = x;
   this.y = y;
   this.z = z;
   this.add = function(){
       $('body').append("<div id='"+this.z+"'>test: x:"+this.x" y:"+this.y"</div>");
   }
   return this.add();
}

t1 = new test(1,2,3);
t2 = new test(2,3,4);

In my code I have a class/objects defined in the following structure, is there any way to attach a event listener to the appended div, but be able to access the object properties.

Answer 1

You can do this, after you added it to the body, so within your this.add function you can bind your events:

$("#"+this.z).mouseover(function(){
     // Function
});

But you know ID’s can’t start with a number right?

Do this if you want to use this.z. I am using div[0] because all jQuery objects are Arrays, so the 0th element is the element I just created.

function test(x,y,z){
   var div = $("<div id='"+this.z+"'>test: x:"+this.x+" y:"+this.y+"</div>").appendTo("body");
   div[0].y = y;
   div[0].x = x;
   div[0].z = z;
   div.mouseover(function(){
       alert(this.x);
   });

   return div;
}

t1 = new test(1,2,3);
t2 = new test(2,3,4);