Шаблон плагина jQuery с использованием "live" - PullRequest
Новая
       44

Шаблон плагина jQuery с использованием "live"

4 голосов
/ 23 декабря 2010

У меня есть много статей о написании объектно-ориентированного кода javascript и разработке плагина jQuery, пока все хорошо, я понимаю, как они работают, и я могу создавать свои собственные плагины.

Но есть одна проблема свсе статьи (даже с официальным руководством по созданию плагинов - http://docs.jquery.com/Plugins/Authoring) - все эти шаблоны не поддерживают "живой".

Давайте возьмем для примера этот шаблон - 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);
   });
};

Будет создан новый экземпляр «MyPlugin» для каждого соответствующего объекта jQuery.

Как изменить его (если это возможно), чтобы он работал с элементами, добавленными вбудущее?

Спасибо

Ответы [ 2 ]

2 голосов
/ 03 февраля 2011

Я часто использую live с успехом в своих плагинах в качестве пользовательской опции.Вот простой пример, который добавляет предупреждение к элементам, по которым щелкают: 

$.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});

В этом примере все, что будет нормально работать с $ ('...'). Live ('click', ...') будет работать с $ (' ... '). clickAlert ({live: true});

Еще одна вещь, в большинстве дизайнов плагинов вы делаете что-то вроде этого:1008 * К сожалению, использование live внутри цикла each не сработает.

1 голос
/ 16 апреля 2011

Я нахожу это работает (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);
...