Создание плагина: вызов callback функции при событии например click
 

Накатал небольшой плагинчик:

(function($){
  $.fn.select = function(opt){
    // предварительно
    def = {
      "list":{},
    };
    set = $.extend({},def,opt);
    var $this = $(this);
    return this.each(function(){
      // наполнение
      for(i in opt.list){
        $this.append('<li val="'+i+'">'+opt.list[i]+'</li>');
      }
      // стиль
      $this.addClass('jquery_select');
      $this.children('li').addClass('jquery_select_off');
      // выбор
      $.test = function(){alert('test');}
      $this.children('li').toggle(
        function(){
          index = $this.children('li').index(this);
          $this.children('li:eq('+index+')').removeClass('jquery_select_off').addClass('jquery_select_on');
        },
        function(){
          index = $this.children('li').index(this);
          $this.children('li:eq('+index+')').removeClass('jquery_select_on').addClass('jquery_select_off');
        }
      );
    });
  }
})(jQuery);

ul.jquery_select {padding:0px;list-style:none;width:100%;overflow:auto;height:100px;background:#E6E6E6;border-left:1px solid #A61919;}
ul.jquery_select li {cursor:pointer;padding:0px 13px 0px 13px;}
li.jquery_select_off {border-bottom:1px solid #D9D9D9;border-top:1px solid #F2F2F2;}
li.jquery_select_on {background:#A61919;color:#fff;border-bottom:1px solid #991717;border-top:1px solid #B31B1B;}

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

(function($){
  $.fn.select = function(opt){
    // предварительно
    def = {
      "list":{},
      "func":function(){}
    };
    set = $.extend({},def,opt);
    var $this = $(this);
    return this.each(function(){
      // наполнение
      for(i in opt.list){
        $this.append('<li val="'+i+'">'+opt.list[i]+'</li>');
      }
      // стиль
      $this.addClass('jquery_select');
      $this.children('li').addClass('jquery_select_off');
      // выбор
      $.test = function(){alert('test');}
      $this.children('li').toggle(
        function(){
          index = $this.children('li').index(this);
          $this.children('li:eq('+index+')').removeClass('jquery_select_off').addClass('jquery_select_on');
          set.func.call(this);
        },
        function(){
          index = $this.children('li').index(this);
          $this.children('li:eq('+index+')').removeClass('jquery_select_on').addClass('jquery_select_off');
          set.func.call(this);
        }
      );
    });
  }
})(jQuery);

И вот казалось бы:

$('#select').select({
        "list":["Россия","Украина","Беларусь","Болгария","Словакия","Словения"],
        "func":function(dat){alert(dat);}
      });

<ul id="select"></ul>

но, стоит только поместить функцию обратного вызова в нутрь какого либо события и она перестаёт работать.

Буду рад услышать ваши мысли по данному вопросу.