Как повесить событие на кнопку?

[Янковиц]

Добрый день. Использую jQuery плагин для фотогалереи: http://lokeshdhakar.com/projects/lightbox2/

Скрипт создаёт вот такую разметку:

<div id="lightbox" class="lightbox" style="display: none; top: 1063px; left: 0px;">
	<div class="lb-outerContainer" style="width: 551px; height: 344px;">
		<div class="lb-container">
			<div class="lb-dataContainer" style="display: block; width: 591px;">
				<div class="lb-data">
					<div class="lb-details"><span class="lb-caption" style="display: inline;">Логан старый</span><span class="lb-number">Image 3 of 5</span></div>
					<div class="lb-closeContainer">
						<a class="lb-close"></a>
					</div>
				</div>
			</div><img class="lb-image" src="/Логан-старый.jpg" data-id="120" style="display: block; width: 755px; height: 471px;">
			<div class="lb-nav" style="display: block;">
				<a class="lb-prev" href="" style="display: block;"></a>
				<a class="lb-next" href="" style="display: block;"></a>
			</div>
			<div class="lb-loader" style="display: none; opacity: 0.444301;">
				<div class="lb-loader__1"></div>
				<div class="lb-loader__2"></div>
				<div class="lb-loader__3"></div>
				<div class="lb-loader__4"></div>
				<div class="lb-loader__5"></div>
			</div>
		</div>
		<div class="lb-comments">120</div>
	</div>
</div>

Пытаюсь на кнопки вперёд назад повесить событие

$(document).on('click','.lb-prev', function(e) {

но ни в какую не работает.

Вот что я делаю:
http://jsfiddle.net/s5v4pLz9/

[Янковиц]

Помогите пожалуйста разобраться

[Malleys]

document.addEventListener("click", function(event) {
	if(event.target.classList.contains("lb-next")) {
		alert("⏩");
	}

	if(event.target.classList.contains("lb-prev")) {
		alert("⏪");
	}
}, true);

[Янковиц]

Спасибо, работает

[Янковиц]

Можно ещё один совет?
Каким образом по клику на "вперёд-назад", например, обратиться к элементу, или получить атрибут элемента img с классом lb-image?

[Malleys]

Я не понял, что вы хотите, но вот теперь оно ещё говорит адрес картинки которая загрузилась...

document.addEventListener("click", function(event) {
	var target = event.target;
	
	if(target.classList.contains("lb-next")) {
		alert("⏩");
	}

	if(target.classList.contains("lb-prev")) {
		alert("⏪");
	}
	
	if(target.matches(".lb-prev, .lb-next")) {
		var image = target.closest(".lightbox").querySelector("img.lb-image");
		
		image.onload = function() {
			image.onload = null;
			alert(image.src);
		};
	}
}, true);

[Янковиц]

Спасибо большое за хорошее решение. Интересно, почему не сработал?

$(document).on('click','.lb-prev', function(e) {

И вообще, возможно ли сделать на jQuery? А то, внутри не работают ни какие jQuery методы
И кстати говоря, closest не поддерживается многими браузерами

[Malleys]

closest не поддерживается многими браузерами

Метод closest имеет очень хорошую поддержку. https://caniuse.com/#search=closest Если вам нужна поддержка в старых браузерах вы можете использовать polyfill service, который выдаёт полифилы когда браузеру это нужно!

А то, внутри не работают ни какие jQuery методы

Функция $ или jQuery это обычная JavaScript функция, вы можете вызывать её в любом месте вашего скрипта. (Проверьте, может она не импортирована/подключена)

возможно ли сделать на jQuery?

Нет, jQuery не поддерживает «погружение» событии. Если вы хотите добавить обработчик события, который перехватывает событие, вы можете сделать это используя явно метод addEventListener, с третьим параметром true.