Jquery custom plugin callback

Question

I'm developing a custom jquery plugin with callback functionality. I have assigned plugin to 2 different element like

$("#id01").plug({
onsave: function(res) { console.log(res); }
});

$("#id02").plug({
onsave: function(res) { console.log(res); }
});

if i make any changes in element 1 and click save, callback function onsave() will trigger on both the elements. Please help me to resolve this.

Here is the sample code:

(function($){
    $.fn.plug = function(options) {
        var param = $.extend({
            selector: this.selector,
            onsave:   function() {}
        }, options);

        $(".savebtn").live('click', function() {
            if(typeof param.onsave == 'function') {
                var data = value;
                param.onsave.call(this, data);
            }
        });

    }
}(jQuery));

live() is so deprecated. Use on() instead. api.jquery.com/on — techfoobar
– techfoobar, Commented Jul 3, 2013 at 14:20
You need to figure out how to tell which callback each event belongs to. — SLaks
– SLaks, Commented Jul 3, 2013 at 14:20
It is hard to guess since we have not enough information, but if you html look like that : jsfiddle.net/beBpb Your a binding 2 event on the save button, which make 2 calls, which create 2 console.log — Karl-André Gagnon
– Karl-André Gagnon, Commented Jul 3, 2013 at 14:29
@Karl-AndréGagnon I have modified your code to show how my plugin works. Please have a look at it. jsfiddle.net/beBpb/8 — sravis
– sravis, Commented Jul 3, 2013 at 14:56

Karl-André Gagnon · Accepted Answer · 2013-07-03 15:20:08Z

2

So, as i said in the comment, you are making a live call on a selector, you are binding 2 events on 2 elements while you should bind 1 event on 2 elements. Here how you should do it.

First create your save button in a var outside the focus function :

var saveBtn = $('<a/>', {href : '#', class : 'savebtn', text : 'Save'});

Then append that button on focus :

$(parent).append(saveBtn);

The binding should look like this :

saveBtn.bind('click', function() {
    if(typeof param.onsave == 'function') {
        var data = param.selector;
        param.onsave.call(this, data);
    }
    return false;
});

Inside a plug-in, you should never make a call to a jquery selector, especially when you are dynamicly creating them.

That make me think, this line:

$(param.selector).live('focus'...

can be change to that :

this.bind('focus'...

It is optimal and it's not using a selector!

I almost forgot, here the fiddle : http://jsfiddle.net/beBpb/9/

A little side note on the "save the button in a var". That will allow you to remove and add the button without messing the binding. It almost optimise the plug-in since a direct binding is faster than a delegated binding (live).

Plus, you can easily remove the save button when click on "Save" with this.remove() (Fiddle). That is adding a good functionnality to your plug-in and is performancewise better than anything since you are caching the button.

edited Jul 3, 2013 at 15:20

answered Jul 3, 2013 at 15:13

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

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

2 Comments

sravis Over a year ago

Thank you, let me implement this in my plugin and check if it works or not!

sravis Over a year ago

When i append the element i was getting [object Objects], so i used .add() and it worked. But here i encountered new issue. When user clicks on save, i was replacing parent html content with input value. By doing this, BIND() was working fine only on 1st save. 2nd time when user get the save button for same input and if he clicks on it, BIND() was not working. Even LIVE() din't workout. So i tried the same senarieo with DELEGATE() and its working perfectly $("parentcont").delegate('.savebtn', "click", function() { console.log("clicked"); });

Collectives™ on Stack Overflow

Jquery custom plugin callback

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related