Не могу понять как использовать переменные

Question

Не могу понять как использовать переменные html, files_path после отработки функции

'$('.upload_files').on( 'click', function( event ){...}'

пробую например вывести в консоль console.log($html) внутри этой функции

$(".add2cart").click(function () {...}

выдается ошибка "Uncaught ReferenceError: $html is not defined"

Ниже весь код:

$(window).ready(function () {
 (function($){
var files; // переменная. будет содержать данные файлов
// заполняем переменную данными файлов, при изменении значения file поля
$('input[type=file]').on('change', function(){
 files = this.files;
});
// обработка и отправка AJAX запроса при клике на кнопку upload_files
$('.upload_files').on( 'click', function( event ){
event.stopPropagation(); // остановка всех текущих JS событий
 event.preventDefault();  // остановка дефолтного события для текущего элемента - клик для <a> тега
// ничего не делаем если files пустой
 if( typeof files == 'undefined' ) return;
// создадим данные файлов в подходящем для отправки формате
 var data = new FormData();
 $.each( files, function( key, value ){
  data.append( key, value );
 });
// добавим переменную идентификатор запроса
 data.append( 'my_file_upload', 1 );
// AJAX запрос
 $.ajax({
  url         : '/wp-content/themes/basic-pro/submit.php',
  type        : 'POST',
  data        : data,
  cache       : false,
  dataType    : 'json',
  // отключаем обработку передаваемых данных, пусть передаются как есть
  processData : false,
  // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
  contentType : false,
  // функция успешного ответа сервера
  success     : function( respond, status, jqXHR ){
// ОК
   if( typeof respond.error === 'undefined' ){
    // файлы загружены, делаем что-нибудь
// покажем пути к загруженным файлам в блок '.ajax-reply'

var files_path = respond.files;
var $html = '';
$.each( files_path, function( key, val ){
  $html += val +'&lt;br&gt;';
} )

$('.ajax-reply').html( $html );

}
   // error
   else {
    console.log('ОШИБКА: ' + respond.error );
   }
  },
  // функция ошибки ответа сервера
  error: function( jqXHR, status, errorThrown ){
   console.log( 'ОШИБКА AJAX запроса: ' + status, jqXHR );
  }
 });
 $(".add2cart").click(function () {
  description = "";
  if ($("[data-id=" + $(this).data("id") + "]").hasClass("descriptionField")) {
   $(".descriptionField[data-id=" + $(this).data("id") + "]").removeClass("error");
   if ($(".descriptionField[data-id=" + $(this).data("id") + "]").val() < 8) {
    $(".descriptionField[data-id=" + $(this).data("id") + "]").addClass("error");
    return false;
   } else {
    description = $(".descriptionField[data-id=" + $(this).data("id") + "]").val();
    // description = description + " www ";
    console.log($html);
   }
  }
  $('#basket').removeClass('close-basket');
  $('button.add2cart[data-id=' + $(this).data("id") + ']').fadeOut();
  $('p.descriptionField-p[data-id=' + $(this).data("id") + ']').fadeOut();
  $('.descriptionField[data-id=' + $(this).data("id") + ']').fadeOut();
  $('.selectPrice[data-id=' + $(this).data("id") + ']').fadeOut();
  $('button.showFields[data-id=' + $(this).data("id") + ']').fadeIn();
  $('button.showFields[data-id=' + $(this).data("id") + ']').addClass('added');
  $('button.showFields[data-id=' + $(this).data("id") + ']').after('<i></i>');
  $.ajax({
   method: "post",
   url: "/ajax/common.php",
   data: ({
    action: "add2cart",
    name: $(this).data("name"),
    price: ($(".selectPrice[data-id=" + $(this).data("id") + "]").val() > 0 ? $(".selectPrice[data-id=" + $(this).data("id") + "]").val() : $(this).data("price")),
    descr: description
   }),
   success: function () {
    showcart();
    messageShowAddBasket("<p>Услуга добавлена<br><button onclick='showbasketlist(true);'>перейти в корзину</button></p>");
   }
  })
 });
});
})(jQuery);
});

Answer 1

files вы догадались объявить вне функций событий и переменная доступна.
Надеюсь натолкнул на мысль