Почему второй вариант работает, а первый нет?

Question

[Rasul Gudantov]

Здравствуйте! С jQuey дело имею недавно. Столкнулся с такой проблемой: делал обработчик события при клике.
Вот такой:

$(document).ready(function(){
	$('.tags').click(function() {
		$('.tag').css('display', 'block');
	});
});

Но он никак не хотел работать. В итоге нашёл такое решение и оно оказалось рабочим.

$(document).on('click', '.tags', function() {
	$('.tag').css('display', 'block');
});

Так вот вопрос: почему первый вариант не работал, а второй работает?

Answer 1

[WebDev]

Второй вариант отличается от первого тем, что обработчик вешается на все элементы с классом tags, даже те, которые будут созданы позже. Первый наоборот - только на те, которые уже есть.
Судя по всему, у вас эти элементы появляются динамически, после загрузки страницы, поэтому первый вариант не работает.

Comments

[Rasul Gudantov]

нет, они изначально есть на странице, то есть элементы присутствуют, да и скрипт подключается в самом конце. Единственное что, так это изначально элементы имеют display:none; наверное из-за этого он их не видит, да?