Use jquery selector and events to call function in javascript object

Question

ok I'm not sure if I'm doing this right so if I'm going about it all wrong please explain.

I have a javascript object which is drawing html based on ajax data.

I am then trying to use jquery to handle events on the html output from an instance of the above object. However I would like to call a function and get a property out of the instance of the javascript object which was used to draw the html.

so my code looks something like this:

function obj1 (){
    this.property1 = "propvalue";


    this.dosomething = function () {
        // does some processing
    }

   this.drawhtml = function () {
    // outputs html
   }

}

// jquery to handle events
 $(document).ready(function(){

// .edit is a class in the html outputted from the drawhtml
   $('body').on('click','.edit',function () {
     // call the dosomething from the object
     });

 });

// create instance of object could be multiple on on page
var instance1 = new obj1;

instance1.drawhtml();

Thanks,

Kenneth · Accepted Answer · 2013-04-18 22:16:49Z

3

You can just use the instance you created before:

// jquery to handle events
 $(document).ready(function(){

// .edit is a class in the html outputted from the drawhtml
   $('body').on('click','.edit',function () {
     instance1.dosomething();
     });

 });

// create instance of object could be multiple on on page
var instance1 = new obj1();  // added parentesis so it's valid javascript

instance1.drawhtml();

EDIT: Additional information starting from the comments:

The best way to handle this is to tie your event handler to the object itself. Something like this:

function obj1 (){
    this.property1 = "propvalue";


    this.dosomething = function () {
        // does some processing
    }

   this.drawhtml = function () {
       var elem = $("<div>my super dooper HTML</div>");
       elem.on('click', this.dosomething);
   }

}

edited Apr 18, 2013 at 22:16

answered Apr 18, 2013 at 22:06

Kenneth

28.8k7 gold badges65 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Flo Schild Over a year ago

Yep, your instance1 will be on the global scope. You can so use it inn a local jQuery scope without problem. However, why do you need to do something like that ?

user2297026 Over a year ago

that would work if I only had one of these object but what if I had 2

Kenneth Over a year ago

Then you would create an instance2 and call the method on the appropriate instance

user2297026 Over a year ago

Im not sure I'm being very clear, both instances will create html which have a css class of .edit, say I created 2 instances I click the html output from instance1 how can I tell the event to run instance1.dosomething instead of instance2? The main aim here is I want to use the main object on many pages with slighly different details. So I intent to include the definition and jquery and just create an instance on each page maybe more than one and pass in the values which determind the difference when I run drawhtml.

Kenneth Over a year ago

I edited my answer. This is a different approach, but I think better suited for what you want to achieve.

|

Collectives™ on Stack Overflow

Use jquery selector and events to call function in javascript object

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related