How to call methods so that they work, are there any restrictions or scopes for methods?

Question

JavaScript

Hello, I am writing a small plugin for the imperavi editor and I ran into a problem, or rather the error 'Uncaught TypeError: undefined is not a function', it happens as follows, there is a certain function that displays a list of files in the directory dynamically, I track the click event on the file and I insert a link to the file into the editor, the editor has its own API that inserts html code called insertHtml (), just once I can’t get through to this method, the error described above comes out. Help me to understand. I tried to display it in alert, without using the method, the event is processed.

the actual code

RedactorPlugins.filemanager = {

init: function()
{
this.buttonAdd('filemanager', 'Filemanager', this.showMyModal);
this.buttonAwesome('filemanager', 'fa-folder');
},

showMyModal: function(){
var callback = $.getJSON('/readdir.php', $.proxy(function(data)
{

var folders = {};

$.each(data, $.proxy(function(key, val) // формируем и храним список каталогов
{
if (typeof val.folder !== 'undefined')
{

folders[val.folder] = val.folder;

}
}, this));

if (!$.isEmptyObject(folders))
{
   $('.redactorfolder').hide();
      var onchangeFunc = function(e)
      {
  var dataF = $(e.target).val();  // при выборе селекта получаем значение пункта (название папки)
  var readList = {};  // контейнер для хранения новых созданных объектов
  var i = 0;

  $('.redactorfolder').remove(); 

  $.each(data, function(key, val) // перебираем ранее полученый список каталогов 
  {
    if (typeof val.folder !== 'undefined' && val.folder == dataF) // если выбранный из селекта каталог соответствует каталогу из списка, то формируем элемент и добавляем его в DOM дерево
    {
                 var list = '<div class="redactorfolder '+ val.folder +'"><span class="del_img">X</span><span class="redactor_clip_link" value="'+i+'"><a href="#">' + val.name + '</a></span></div>';

    $('.otherFm').append(list);
    readList[i] = list;
    i++;
    }
  });

// далее я кликаю по ссылке файла и он должен вставить в редактор
  $('.otherFm').find('.redactorfolder').on('click', '.redactor_clip_link', $.proxy(function(){ 

    var v = $(this).attr('value');
    $.each(readList, $.proxy(function(k, val) // val хранит в себе html код который должен вставляться 
    {
       if (k == v) {
       this.insertHtml(val); // здесь выходит ошибка 'Uncaught TypeError: undefined is not a function'
// пробовал через alert, без этого метода все отрабатывает
//как правильно обращаться к этому методу подскажите
       }
    }, this));
  }, this));
  };

  var select = $('<select id="redactor_image_box_select">');
  $.each( folders, function(k, v)
  {
  select.append( $('<option value="' + v + '">' + k + '</option>'));
  });

  $('.otherFm').append(select);
  select.change(onchangeFunc);

  }

this.selectionSave();
this.modalInit(RLANG.fm, this.opts.modal_fm, 500, callback);

}

};

Answer 1

the answer was, as always, under our noses and it was to save the scope in a variable. By setting a variable with the value this. In general, in JavaScript this is called a closure.