Как избавить от кэширования JS?

Question

[Максим Шадрин]

Всеми привет. Я не уверен, что корректно поставил вопрос, но по-другому в голову не приходит.
Суть такова. Есть страница конструктор фотокниги. Там наворочено очень много кода, он избыточен. Заранее извиняюсь за говнокодинг, для начала надо, чтобы все работало хотя бы так.
Страница здесь
Суть такова:

На странице есть кнопки, которые открывают галлерею. Галлерея находится в скрытом блоке, по клику на кнопку она блок инициализируется с помощью magnific popup, далее туда аяксом грузятся нужные данные.
Внутри загруженных данных находятся блоки с изображениями для выбора. Они являются ссылками с классом .pic
Когда попап окно полностью проинициализировалось, срабатывает такой listener

$("body").on('click', findPic, function(event) {
			event.preventDefault();

			var val = $(this).data("name");

			//меняем цену
			var pr = $(this).parents(".gal-item").find(".price").html();
			price.html(pr);

			//меняем пикчу
			var pic_src = $(this).css('background-image');
			pic_src = pic_src.replace('url(','').replace(/\"/gi, "");
			pic_src = pic_src.substring(0, pic_src.length - 1);
			pic.attr("src", pic_src);

			//записываем в аттрибут data-preview-img большую картинку для превью
			var preview = $(this).data("preview-img");
			pic.data("preview-img", preview);
			pic.attr("data-preview-img", preview);

			// записываем опции связангого товара
			self.sessionStorageOptions.options[name] = {
				is_gallery: true,
				small_pic: pic_src,
				big_pic: preview,
				parent_id: id,
				caption: title,
				value: val,
				price: pr

			}

			// пишем в sessionStorage
			self.writeToSessionStorage();

			// меняем значение надписи на картинке превьюшке опции
			$("#options-form_" + id + " .images-set .label").html(val);

			console.log("id: " + id + " name: " + name + " val: " + val);
			//отслеживаем изменение конкретного параметра
			self.parametersChange(id, name, val);

			$(self.options.container + " .pic").removeClass("selected");
			$(this).addClass("selected");
			// var opt_id = $(this).data("id"); //получаем значение выбранного элемента
			// opt_form.val(opt_id); //записываем значение выбранного элемента

			//закрываем всплывашку
			$.magnificPopup.close();
			//чистим содержимое попапа
			$("#hidden-gallery").empty();

Как вы видите, здесь много console.log, я их использовал для отладки.
Собственно в этом коде и происходит затык: как только мы делаем 1ый выбор, в консоли увидим выбор одного элемента из формы. Если мы нажмем на кнопку еще раз. Консоль нам отрисует выбор из формы уже два раза. Если мы нажмем на кнопку 3ий раз (можно нажать на другую кнопку(в дополнительных полях)), то соответственно сработает 3 раза.

Это поведение ломает всю логику. Как сделать так, чтобы не было этого накапливания и откуда они вообще берутся? Я очищаю popup при закрытии. Все данные по id, name и другим параметрам передаются верно. Но откуда это накопление? Я не понимаю.
Может кто-нибудь объяснить как с этим бороться и почему так происходит?

Answer 1

[eternalSt]

Насколько я понимаю это вот этот участок кода

select_item: function(e, o) {
            console.log("select item: " + e + " --- " + o);
            var t = this,
                i = $(".msoptionsprice-" + e),
                n = $("#options-form_" + e + " .subprod-title").html() + ":",
                s = $("#options-form_" + e).find(".images-set img");
            console.log("pic ---- "), console.log(s);
            var a = s.data("preview-img");
            $(this.options.container).find('[data-preview-img="' + a + '"]').addClass("selected");
            var r = this.options.container + " .pic";
            $("body").on("click", r, function(a) {
                a.preventDefault();
                var r = $(this).data("name"),
                    c = $(this).parents(".gal-item").find(".price").html();
                i.html(c);
                var l = $(this).css("background-image");
                l = (l = l.replace("url(", "").replace(/\"/gi, "")).substring(0, l.length - 1), s.attr("src", l);
                var p = $(this).data("preview-img");
                s.data("preview-img", p), s.attr("data-preview-img", p), t.sessionStorageOptions.options[o] = {
                    is_gallery: !0,
                    small_pic: l,
                    big_pic: p,
                    parent_id: e,
                    caption: n,
                    value: r,
                    price: c
                }, t.writeToSessionStorage(), $("#options-form_" + e + " .images-set .label").html(r), console.log("id: " + e + " name: " + o + " val: " + r), t.parametersChange(e, o, r), $(t.options.container + " .pic").removeClass("selected"), $(this).addClass("selected"), $.magnificPopup.close(), $("#hidden-gallery").empty()
            })
        },

Если так, то проблема достаточно тривиальная.

Каждый раз при запуске метода select_item регистрируется новый обработчик $("body").on('click', findPic). Получается, сколько раз вызвали функцию select_item столько-же одинаковых обработчиков создастся.

Что-бы избавится от проблемы, нужно при закрытии popup удалить обработчик $("body").on('click', findPic). методом off.

$("body").off('click', findPic) // Судя по докам так, хотя сам не проверял

И проблема должна уйти.

P.S.
Это самое быстрое, но не самое хорошее решение проблемы.

P.P.S Убедительная просьба, в следующий раз, показывай весь контекст проблемы. А то получается проблема была не в этой функции, а в другом месте и что-бы это понять пришлось деобфускатором пройтись по коду, а читать код после обфускации тяжело.

Comments

[Максим Шадрин]

Большое спасибо! Действительно помогло. Только повесил off не при закрытий модалки, а прямо перед навешиванием обработчика on. Получилось так:

$("body").off('click', findPic);
//добавляем новый обработчик
$("body").on('click', findPic, function(event) {
  event.preventDefault();
  .....

[eternalSt]

Максим Шадрин, так конечно можно. Но вот смотри какая штука получается. При первом запуске будет удаляться несушествующий обработчик.