4

I have red many articles about writing object oriented javascript code and developing jQuery plugin, so far so good, I understand how they work and I can create my own plugins.

But, there is one problem with all the articles ( even with official plugin authoring guide - http://docs.jquery.com/Plugins/Authoring ) - these all patterns don`t support "live".

Let`s take for example this pattern - http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html

$.fn.myplugin = function(options)
{
   return this.each(function()
   {
       var element = $(this);

       // Return early if this element already has a plugin instance
       if (element.data('myplugin')) return;

       // pass options to plugin constructor
       var myplugin = new MyPlugin(this, options);

       // Store plugin object in this element's data
       element.data('myplugin', myplugin);
   });
};

There will be created new "MyPlugin" instance on each jQuery matching object.

How to change it (if it`s posible) so it would work on elements that are added in the future?

Thanks

Dagg Nabbit
  • 75,346
  • 19
  • 113
  • 141
Andrew
  • 127
  • 6
  • how are those elements added? – yoda Dec 23 '10 at 14:07
  • they may be added using ajax, I know that it`s possible to reapply plugin using callbacks but that seems to be a waste since new object will be created – Andrew Dec 23 '10 at 14:19

2 Answers2

2

I’ve been using live with success in my plugins often as a custom option. Here's a trivial example that adds an alert to elements that are clicked:

$.fn.clickAlert = function(settings) {
    settings = $.extend({live: false}, settings);

    function clickAlertFn() {
        alert('Clicked!');
    }

    if (settings.live) {
        return this.live('click', clickAlertFn);
    } else {
        return this.click(clickAlertFn);
    }
};

// this will only work on existing `a` elements with class foo
$('a.foo').clickAlert();

// this will work on existing and future `a` elements with class bar
$('a.bar').clickAlert({live: true});

In this example anything that would work normally with $('...').live('click', ...') will work with $('...').clickAlert({live: true});

One additional thing, most plugin designs have you do something like this:

$.fn.foo = function() {
    return $(this).each(function() {
        // code in here...
    });
}

Unfortunately, using live inside the each loop won't work.

MrColes
  • 2,453
  • 1
  • 28
  • 38
  • 2
    1. You don't need to wrap `this`, as it's already jQuery. 2. You can do `return this[settings.live ? 'live' : 'bind']('click', clickAlertFn);` for simpler code – Darcy Jul 07 '11 at 14:48
  • Great points @Darcy! I changed the `this`’s, but kept the verbose if-statement for readability of the example—however I do love simplifications like that and hope people see your comment. – MrColes Oct 21 '11 at 04:19
1

I find this works (jQuery 1.5.2):

(function($) {
$.fn.clickTest = function () {
    return this.each(function() {
        $('.clicker').die('click').live('click', function() {
            console.log('clicked');
        });
        $(this).click(function() {
            $('body').append('<a href="#" class="clicker">click here '+$(this).attr('id')+'</a><br> ');

        });
    });
}; }) (jQuery);
rphunt2002
  • 21
  • 1