Почему jQuery так странно себя ведет (необходима двойная $-обертка, чтобы сработал скрипт)?

Question

[Павел]

В примере ниже суть в том, что по событию change на input type="file" работает следующий код. Все работает стабильно, все нормально, кроме одного но:
В случае некорректного размера файла вылезает поп-ап с ошибкой, а вот содержимое инпута не трется, до тех пор, пока jQuery-объект не обернуть во второй раз. В коде ниже см. комментарии, там вся суть.

// event мы получаем правильный по клику по элементу. 
// Данные там корректные, это именно тот DOM-элемент, что нам нужен.
var $input = $(event.target);
$input.val('') // не работает
$($input).val('') // работает
// WTF?

Ниже немного упрощенный конструктор привязки проверки валидности файла:

Fields.prototype.load = function(event) {
	var files = event.target.files;
	var $modal = $('#errorModal');

	var $input = $(event.target);
	// $input имеет 3 ключа: '0', 'context', 'length'
	// $($input) имеет 4 ключа: '0', 'context', 'length, 'selector'; 'selector' имеет значение пустой строки: ""

	if (files) {
		if (files[0]) {
			var fileSize = (files[0].size/1024/1024).toFixed(2);
			if (fileSize > 10) {
				showFileError('Файл слишком большой','бла-бла')
			}
		}
	}

	function showFileError(title, text) {
		var html = '<h4 class="title-error">'+title+'</h4><p class="text-error">'+text+'</p>';
		
		console.warn($input)
		// 3 ключа по-прежнему
		console.warn($($input))
		// 4 ключа по-прежнему
		
		$($input).val(''); // работает, а $input.val('') - не работает.
	}
}

Comments

[Алексей Зуев]

Можете сэмулировать проблему в песочнице? У меня работает ваш пример

[OVK2015]

Потому что "$input" - это имя переменной. И какой смысл event.target в jQuery заворачивать?

[Виталий Инчин ☢]

Покажите на живом примере

Answer 1

[Кевин Митник]

var $input = $(event.target);

В консоли посмотри вывод того, что возвращает JS. Там находится ссылка на объект, а не сам объект, на сколько мне известно.