Форум

finlolo · #1 (**permalink**) 12.08.2018, 19:38

Всем привет!

Есть несколько товаров, у которых есть кнопки, каждая кнопка товара имеет свой уникальный id типа btn_1, btn_2 и т.п. Id добавляется кнопке из бд товаров, то есть они не 0 ... n идут по порядку, а могут быть разными и не иметь никакой последовательности.

Мне нужно при нажатии на кнопку отправлять запрос через ajax на сервер, чтобы сервер сделал некоторые действия, например записал в базу дату клика на эту кнопку.

Вопрос:

Как сделать так, чтобы один обработчик события обрабатывал все имеющиеся кнопки у товаров. this.onclick обрабатывает вообще все на странице, а мне нужно только по товарам.
И как передать id этой кнопки в функцию, которая делает ajax запрос.

this.onclick = function(){//обрабатываем нажатие по кнопке
            ajaxGet('example.php', id); //передаем url и id кнопки на какую тыкнули
}

Malleys · #2 (**permalink**) 12.08.2018, 20:22

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn_a63n1">Кнопка товара</button>
	<button id="btn_2nao7">Кнопка товара</button>
	<button id="btn_1nh34">Кнопка товара</button>
	<button id="btn_1v4vy">Кнопка товара</button>
	<button>Кнопка другая</button>
	<button>Кнопка другая</button>
	<script>
		
		document.addEventListener("click", function(event) {
			if(event.target.matches("button[id^='btn_']")) {
				var id = event.target.id;
				
				id = id.replace("btn_", "");
				
				// код который может работать с конкретным id
				alert(id);
			}
		});
		
	</script>
</body>
</html>

Вы можете захотеть уточнить селектор кнопки товара event.target.matches("button[id^='btn_']")

рони · #3 (**permalink**) 12.08.2018, 20:23

finlolo,
Делегирование событий

finlolo · #4 (**permalink**) 12.08.2018, 20:28

Спасибо большое!!!

Форум

Справочник

Discord чат

Курсы javascript