Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.08.2018, 20:38
Интересующийся
Отправить личное сообщение для finlolo Посмотреть профиль Найти все сообщения от finlolo
 
Регистрация: 12.08.2018
Сообщений: 25

Обработка событий по клику у нескольких кнопок и передача в функцию
Всем привет!

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

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

Вопрос:

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

this.onclick = function(){//обрабатываем нажатие по кнопке
            ajaxGet('example.php', id); //передаем url и id кнопки на какую тыкнули
}
Ответить с цитированием
  #2 (permalink)  
Старый 12.08.2018, 21:22
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 393

<!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, 21:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,874

finlolo,
Делегирование событий
Ответить с цитированием
  #4 (permalink)  
Старый 12.08.2018, 21:28
Интересующийся
Отправить личное сообщение для finlolo Посмотреть профиль Найти все сообщения от finlolo
 
Регистрация: 12.08.2018
Сообщений: 25

Спасибо большое!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Передача в функцию переменного количества аргументов Эдди Элементы интерфейса 35 09.11.2018 15:25
Передача rel в input по клику на ссылку Diiim Элементы интерфейса 3 07.03.2018 09:42
передача параметров в функцию TomTykver jQuery 2 27.02.2016 12:28
Один обработчик для нескольких кнопок! frundik Элементы интерфейса 2 10.07.2012 15:30
Передача параметров с сервера в функцию mikel Events/DOM/Window 2 29.08.2011 21:18