How to create a link to invoke function of the jquery plugin itself

Question

My plugin creates links that then invoke functions of the plugin itself. I could directly manipulate DOM and use something like $link.click(function() {...}), but I do not want to use this approach, because -

my code gets a lot more complex and
string manipulation is faster

How can I invoke a function of the plugin via a string link?

The problem is finding the actual DOM element, on which the plugin was created. I cannot just use/set the HTML id, as it might be used by the page for some other purpose or might not be unique. I came up with the idea to add a unique class to find the plugin later:

 // init function of plugin
 init : function( options ) {
     return this.each(function () {
        var data = $this.data("myPlugin");
        if (!data) {
          data.uniqueClass = 'p' + new Date().getTime() + '_' + Math.random().toString().substring(2);
          $this.addClass(data.uniqueClass);  
          this.data('myPlugin', data);
          // generate link
          $this.html('<a onclick="jQuery(\'.' + data.uniqueClass + '\').myPlugin(\'func\');">Do func</a>');
        }   
     });
 }

 // function that i want to call of my plugin
 func : function() { 
    return this.each(function () {
       // do stuff
    });
 }

But is there a nicer way to do this?

whay are you using inline obtrusive script in a jQuery plugin? Makes no sense — charlietfl, Jan 20 '13 at 04:54
can access the parent element of the `` , element that you are adding the class to, using `parent()`, no need for unique class just to create a target for click handler — charlietfl, Jan 20 '13 at 04:59
@charlietfl The code that i wrote up there with $this.html(...) is simplified, in reality its a big table which I am creating by concatenating strings that contain quite some loops for rows and cells. The links in the cells should call a function with different arguments. So if i add an class to the links itself, then i would have to save the function arguments somewhere else in html and parse them out with e.g. metadata plugin again, which i do not consider very pretty either. — Flo, Jan 20 '13 at 08:16
metadata plugin is obsolete now that jQuery reads html5 `data-` attributes which can hold any form of data. Doesn't really matter how complex the html is you are parsing still hard to persuade me that inline vs unobtrusive makes more sense. In long run is easier to maintain separation of content and code — charlietfl, Jan 20 '13 at 12:45
Nice, +1 for the hint with the `data-` attributes, didn't know about that. — Flo, Jan 20 '13 at 14:43
if html is complex should also look at using a template engine like handlebars.js or mustache — charlietfl, Jan 20 '13 at 15:03

score 0 · Answer 1 · answered Jan 20 '13 at 04:51

0

Don't do this. The added performance you'd get is negligible.

I'm not posting this as a comment because this should be the answer. Don't do it!!.

answered Jan 20 '13 at 04:51

Joseph Silber

214,931
59
362
292

How to create a link to invoke function of the jquery plugin itself

1 Answers1