Jquery function on object's property via this

Question

I have an object:

var obj = { id: $('#f_view') };

I have a function:

function switchFrom(trigger) {
          trigger.id.click(function() {
                 this.id.toggleClass('class');
          });
};

When i run the function:

switchFrom(obj);

I get :

undefined is not a function (evaluating'this.id.toggleClass('class')')

When I refer to the element explicitly, the function works.

$('#f_view').toggleClass('class');

What Am i doing wrong? Thank you for your time.

id is a pretty bad variable name in your case. Should be something like $ele — Farzher
– Farzher, Commented Jun 20, 2015 at 19:04
trigger.id.toggleClass('class'); is what you wanted to do. The answer below is probably better though — Farzher
– Farzher, Commented Jun 20, 2015 at 19:05
@StephenBugsKamenar , this way works, thank you. I was just wondering whether same thing can be done with this reference. — Monocheddar
– Monocheddar, Commented Jun 20, 2015 at 19:15

AmmarCSE · Accepted Answer · 2015-06-20 19:08:43Z

4

You need to convert to a jQuery object by wrapping in $(...) like

function switchFrom(trigger) {
         trigger.id.click(function() {
                 $(this).toggleClass('class');
          });
}

This is because native javascript objects do not have access to jQuery methods

answered Jun 20, 2015 at 18:59

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

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

3 Comments

when i have the object set up like: var obj = { id: $('#f_view') }; and I do: $(this).toggleClass('class'); I am still getting the same error.

Sorry i forgot to remove .id reference to the object's property. your solution works.

As a side note, if you want this inside function to refers to object, you need to call() method (or using apply()): jsfiddle.net/qz4odfj8/2