Calling a javascript function on a jQuery object

Question

I'm attempting to call a javascript function on a jQuery element that I created, but it seems that the function is not being called when run on a function. The function works when run on its own, but not when run on another jQuery object. Here is the function:

$(document).ready(function() {
var $Chart = $('#Chart');
/*
 returns true if some Expand element is open
*/
function closeExpand() {
    alert("Hello");
    /*$(this).css("background-color", "black");*/
};
});

It works when called on its own: http://jsfiddle.net/5F5GF/

$('.ChartLink').click(function() {
    closeExpand();
    });
});

But not when called on another jQuery object: http://jsfiddle.net/dsHRN/

$('.ChartLink').click(function() {
    $Chart.closeExpand();
    });
});

What am I doing wrong here, and how do I call a javascript function on another object?

PSL · Accepted Answer · 2013-12-19 20:59:08Z

8

You could extend jquery.fn (jquery prototype) to add your new function, so that it is accessible from jquery object:

Try:

$.fn.closeExpand = function() {
   this.css("background-color", "black");
   return this; //for chaining
};
$Chart.closeExpand();

Demo

Your function closeExpand is not currently associated to the jquery object prototype, by adding it to its prototype you can invoke it with the jquery object.

Or you could do:

$('.ChartLink').click(function() {
    closeExpand.call($(this));
});

and

function closeExpand() {
   this.css("background-color", "black");
};

edited Dec 19, 2013 at 20:59

answered Dec 19, 2013 at 20:54

PSL

124k21 gold badges257 silver badges243 bronze badges

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

5 Comments

Tim Over a year ago

The top solution works, thanks! I'm still a little confused on how exactly the "$.fn.closeExpand" syntax works, could you explain why this syntax is necessary, as opposed to what I did? (I will accept your answer in 4 minutes once I am able to)

PSL Over a year ago

@Tim $.fn is an alias to jquery prototype, so you are just adding your function as a part of jquery prototype so any jquery object you create can access this function. With your original code it is not associated to the jquery prototype that is why you couldn't just invoke it from jquery object.

Tim Over a year ago

ahh just like other regular jQuery objects, I see. Thanks so much :)

PSL Over a year ago

@Tim Yes they are just any other objects in javascript. And also default the context will be a jquery object so you dont have to redundantly do $(this). Second version of my code does similar thing but it just sets the function context to the object passed in as argument of call. return this; from jquery function is generally imporant because it lets you do the chaining. i.e example you can do $Chart.closeExpand().fadeout(3000)

Gerold Broser Over a year ago

This works only if $.fn.closeExpand = ...; is in the same context as $Chart.closeExpand(); here. If the latter is used inside a function: TypeError: $Chart.closeExpand is not a function is shown. If I edit your Demo accordingly it works. Confused...

Collectives™ on Stack Overflow

Calling a javascript function on a jQuery object

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related