Обработка событий по клику у нескольких кнопок и передача в функцию
Всем привет!
Есть несколько товаров, у которых есть кнопки, каждая кнопка товара имеет свой уникальный id типа btn_1, btn_2 и т.п. Id добавляется кнопке из бд товаров, то есть они не 0 ... n идут по порядку, а могут быть разными и не иметь никакой последовательности. Мне нужно при нажатии на кнопку отправлять запрос через ajax на сервер, чтобы сервер сделал некоторые действия, например записал в базу дату клика на эту кнопку. Вопрос: Как сделать так, чтобы один обработчик события обрабатывал все имеющиеся кнопки у товаров. this.onclick обрабатывает вообще все на странице, а мне нужно только по товарам. И как передать id этой кнопки в функцию, которая делает ajax запрос.
this.onclick = function(){//обрабатываем нажатие по кнопке
ajaxGet('example.php', id); //передаем url и id кнопки на какую тыкнули
}
|
<!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_']") |
finlolo,
Делегирование событий |
Спасибо большое!!!
|
| Часовой пояс GMT +3, время: 23:11. |