создание плагина jQuery с проблемами при многократной реализации на одной странице

Question

Я создал плагин jQuery, который превращает универсальное поле выбора в нечто симпатичное, однако у меня возникает проблема, когда плагин используется более одного раза на странице, с которой я сталкиваюсь, например, когда я запускаю событие clickкоторый сдвигает опции выпадающего списка, все выбранные на странице слайд, как я могу это остановить?

МОЙ КОД

    /***********
* Select-Me create pretty select lists using a <ul> inplace of the <select>
* Author: Simon Ainley
* Version: 0.0.1
***********/

    (function($){  
        $.fn.selectMe = function(options) {  
            var defaults = {
                select_text : null,
                remove_first_value : false,
                speed : 1000
            }

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

            return this.each(function() {
                //get an instance of the object we are working with
                var obj = $(this);
                var obj_name = obj.attr('name');
                obj.closest('form').append('<input type="hidden" id="dropdown_value" value="" name="'+obj_name+'"/>');
                var options = $("option", obj);
                var replacement_list_heading = "<dl id='dropdown'><dt><span>"+defaults.select_text+"</span><a href=''>Go</a></dt></dl>";
                obj.closest('form').prepend(replacement_list_heading);
                var values_start = "<dd class='shadow_50'><ul></ul></dd>";
                $("#dropdown").append(values_start);
                if(defaults.remove_first_value == true) {
                    options.splice(0, 1);
                }
                options.each(function(){
                    $("#dropdown dd ul").append(
                        '<li><a href="#"><span class="option">' + 
                        $(this).text() + '</span><span class="value">' + 
                        $(this).val() + '</span></a></li>'
                    );
                });

                obj.remove();

                $('#dropdown li a').hover(function() {
                    $(this).parent('li').addClass('hover');
                }, function() { 
                    $(this).parent('li').removeClass('hover');
                });

                $("#dropdown dt a").click(function() {
                    $("#dropdown dd").slideToggle(defaults.speed);
                    return false;
                });

                $("#dropdown ul a").click(function(e) {
                    var value = $(this).find('span').text();
                    $(this).addClass('selected');
                    $("#dropdown_value").val(value);
                    $("#dropdown dt span").text($('.selected .option').text());
                    $("#dropdown dd").slideUp(defaults.speed);
                    $(this).removeClass('selected');
                    e.preventDefault();
                });
            });
        };  
    })(jQuery);

Answer 1

При подключении обработчиков событий, таких как щелчок, вы хотите найти элементы в контексте к текущему объекту, прямо сейчас у вас есть очень общий селектор, например

$("#dropdown dt a").click(function() {

Это выберет всевыпадающие списки (кстати, вы не можете иметь два элемента с одинаковым идентификатором, похоже, что ваш плагин создает dl с id = "dropdown" для каждого выбора).Что вы хотите сделать, это выбрать раскрывающийся список в контексте вашей текущей obj, так что примерно, возможно, что-то вроде этого

obj.closest('.dropdown dt a').click(function() {...

Сделайте то же самое для других событий, используйте селекторы в контексте длятекущий элемент.