Как исправить срабатывание on change несколько раз?

Question

[andreyqin]

Есть следующий код:

$('.sidebar').on('click', '.adminPane span', function() {
			var action = $(this).data('action'),
				caption = $(this).find('img').attr('alt'),
				categoryId = $(this).data('id') || 0;
				clickedElement = $(this);
			$('.file_view')
				.empty()
				.add('.category_name')
				.attr('value', '');
			$.post(
				'/includes/admin.php',
				{'categoryId': categoryId, 'action': action},
				function(changesCategory) {
					var allowedExtensions = [],
						maxImageSize = changesCategory.maxImageSize;
					for (extensions in changesCategory.allowedExtensions) {
						allowedExtensions.push(changesCategory.allowedExtensions[extensions]['extension']);
					}
					$('.changes_category').find('h3').html(caption);
					if (changesCategory.menuInfo.length > 0) {
						$('.category_name').attr('value', changesCategory.menuInfo[0].name);
						$('.file_view').html('<img src="/images/menu_images/' + changesCategory.menuInfo[0].extension + '">');
					}
					$('.category_image').on('change', function() {
						var fileSize = this.files[0].size,
							fileName = $(this).val(),
							parts = fileName.split('.');
						if (fileSize > maxImageSize) {
							alert('Размер файла не должен превышать ' + maxImageSize / 1024 / 1024 + ' Мб');
							return false;
						}
						if (allowedExtensions.join().indexOf(parts[parts.length - 1]) < 0) {
							alert('Разрешенные расширения файлов: ' + allowedExtensions.join(', '));
							return false;
						}
						$('.file_view').html(fileName);
					});
					clickedElement.overlay({mask: '#222',
											top: 'center',
											load: true});
				},
				'json'
			);
		});

Отправляем на сервер необходимые данные, получаем, обрабатываем, после чего открывается форма добавления/редактирования категории меню. В этой форме есть input[type="file"], на котором стоит события on change для проверки расширения и размера файла до отправки на сервер. Проблема в следующем: предположим, мы открыли форму и выбрали заведомо неправильный файл (большой или не с тем расширением), у нас сработал какой-то алерт, закрыли форму, снова открыли, выбрали неправильный файл, у нас сработал алерт 2 раза. Стоит повторить действия, и алерт сработает уже 3 раза, еще повторим - 4 раза, и так до тех пор. пока не перезагрузим страницу. Я примерно понял в чем проблема - при каждом открытии формы срабатывает on click, в котором ставится событие on change, сколько раз открыли форму, столько событий on change и поставилось. Присваивать событие on change вне этого кода - не вариант, так как внутри формируется массив из полученных с сервера данных allowedExtensions, для проверки расширений. Пробовал снимать событие после каждой ошибки перед return:
$(this).unbind('change');
но в случае повторного выбора файла событие не срабатывает вообще.
Вопрос: как решить проблему?

Answer 1

[Слава]

$('.category_image').on('change', function....
вместо этого пропишите такое

$('.category_image').off('change.file').on('change.file', function....
Т.е снимаете свой обработчик непосредственно перед тем, как поставить.

Comments

[andreyqin]

Вот всегда так бывает - опишешь проблему, а через пару минут решишь её. Я сделал так: в самом начале функции on click снял обработчик:
$('.category_image').unbind('change');
Но все равно спасибо за помощь!

[Слава]

Снимать обработчик лучше перед навешиванием, чтобы было наглядно) И чтобы не потерять его в будущем.
Пожалуйста) Удачи

[andreyqin]

Хорошо, в таком случае лучше будет сделать так, как вы написали.