How to make my function get invoked by $(..).name()?

Question

I have made a js function named draw(), now is it possible that I can call this method using . operator after I get the element using $(...). I mean I like this to work $(#myId).draw(). Right now it gives error like undefined function. How can I make it work?

Are you looking for invoking the method like a jquery function? — RaviH, Feb 11 '14 at 06:04
Then read about how to write a jquery plugin and make it a jquery plugin. — RaviH, Feb 11 '14 at 06:05
@WesleyMurch yes it seems duplicate though I am not making any plugin :P. I will mark it as. — Harry Joy, Feb 11 '14 at 06:10
The `.` operator is not directly related to "invoking functions", excepting as it can affect the context. `$(..).draw()` simple tries to invoke the function-object returned from the `draw` property of the jQuery object which was returned by `$(..)`.. in your case, the property doesn't exist and yields `undefined` which cause the exception to be thrown. The correct way to implement such a feature in this case, as pointed out, is to create a jQuery plugin or "extension". — user2864740, Feb 11 '14 at 06:10

score 3 · Answer 1 · answered Feb 11 '14 at 06:06

It's hard to tell from your question, but it sounds like you want to create a jQuery plugin. You can do that by extending $.fn:

$.fn.draw = function(){
    /* ... */
}

Then you can call that against a selector:

$('#myId').draw();

More documentation here: http://learn.jquery.com/plugins/basic-plugin-creation/

score 1 · Answer 2 · edited May 23 '17 at 11:57

1

You have to create it as a jquery plugin. As described here.

Best Way to Extend a jQuery Plugin

Documentation from jQuery: http://api.jquery.com/jquery.fn.extend/

JsFiddle sample: http://jsfiddle.net/Wdx75/

var obj1 = { "color" : "yellow" };
var obj2 = { "background" : "blue" };

var o = $.extend({}, obj1, obj2);


$.fn.draw = function(){
    $("div").css(o);
}

$('abc').draw();

edited May 23 '17 at 11:57

Community

1
1

answered Feb 11 '14 at 06:05

drhanlau

2,517
2
24
42

score 1 · Answer 3 · edited May 23 '17 at 11:57

1

You'll neet to look at adding a jquery plugin

$.fn.draw= function(){

}

edited May 23 '17 at 11:57

Community

1
1

answered Feb 11 '14 at 06:06

actual_kangaroo

5,971
2
31
45

Shaik Mahaboob Basha · Accepted Answer · 2014-02-11T06:36:06.893

1

The best way is to add methods using jquery.fn.extend ( As we can add several plugin functions at a time )

Sample code looks like

jQuery.fn.extend({
  draw: function() {
    return this.each(function() {
      // add code here to draw
    });
  }
});

Once you add this method, you can use below code to call your draw method on any jQuery element

$("#myId").draw()

Official Reference: jquery.fn.extend

edited Feb 11 '14 at 06:36

answered Feb 11 '14 at 06:06

Shaik Mahaboob Basha

1,092
5
14

out of interest, is there any reason that `fn.extend` is better than `fn.draw = ...`? – actual_kangaroo Feb 11 '14 at 06:26
@Eru The jQuery.fn.extend is used to extend the jQuery.fn object, which in fact adds several plugin functions at a time. – Shaik Mahaboob Basha Feb 11 '14 at 06:29
ahh I see, you add a whole object. thanks – actual_kangaroo Feb 11 '14 at 06:33

score 1 · Answer 5 · answered Feb 11 '14 at 06:07

You want to use jQuery.fn.extend, documented here http://api.jquery.com/jquery.fn.extend/.

$.fn.extend({
    draw: function() {

    // do something to the jQuery object
    return this;

    }
});

Now you can call .draw on a jQuery object created with $(...).

How to make my function get invoked by $(..).name()?

5 Answers5