Как сделать плагин JQuery многоразового использования?

Question

У меня проблема с этим плагином целую вечность, но я не могу понять это правильно.

Вот тест страница . Когда вы нажимаете кнопку page , она должна выдавать оповещения page дважды , но она предупреждает photo в секунду .

Это происходит потому, что я повторно использую этот плагин для другой кнопки под названием «фото». Я думаю, что вторая кнопка каким-то образом перезаписывает первую кнопку, что я не совсем понимаю, почему это так.

$(document).ready(function(){

    $('.get-page').get_overlay({
        targetObject:         '.page'
    });

    $('.get-photo').get_overlay({
        targetObject:         '.photo'
    });

});

Тогда это означает, что этот плагин не может быть повторно использован вообще, тогда какой смысл иметь плагин на первом месте?

Есть идеи, где я сделал неправильно в этом плагине? Как я могу это исправить?

(function($){

    $.fn.get_overlay = function(options) {

             var defaults = {
                targetObject:            ''
            }

            var options =  $.extend(defaults, options);
            var o = options;

            var $cm = this.click(function() {

                alert(o.targetObject);

                $.fn.get_overlay.centralise();

                return false;



            });

            if(!$.fn.get_overlay.centralise) $.fn.get_overlay.centralise = {};

            $.fn.get_overlay.centralise = function() {

                alert(o.targetObject);

            }

    }      
})(jQuery);​

Answer 1

@ lauthiamkok , я думаю, вам нужно пересмотреть руководство по созданию плагинов в jquery docs. Вероятно, не стоит делать это $.fn.get_overlay.centralise внутри вашего плагина. Если вы хотите иметь доступ к centralise() из общедоступной области, вы должны сделать это методом. Затем, как советует авторское руководство, рекомендуется вернуть объект jquery, чтобы разрешить цепочку для вашего плагина.
Проверьте рабочий пример на http://jsfiddle.net/elclanrs/FrMSY/1/

$.fn.get_overlay = function(options) {

    var o = $.extend({
        targetObject: ''
    }, options);
    var $this = this;

    $this.centralise = function() {
        alert(o.targetObject);
    };

    return this.each(function() {
        $(this).click(function() {
            alert(o.targetObject);
            $this.centralise();
            return false;
        });
    });

};

Answer 2

Вместо использования локальной переменной для хранения targetObject используйте .data для ее хранения.