Как в ajax сделать так чтоб кликать по рандомному количеству ссылок на странице?

Question

[Gangg]

Ссылки на странице выводятся у меня вот таким php кодом

<?php foreach ($ids as $itemIds): ?>

<a id="url-1" href="/myscript.php?id=<?php echo $itemIds ?> ?>">Клик по ссылке 1</a>
<div id="info-1"></div>
<br>
<a id="url-2" href="/myscript.php?id=<?php echo $itemIds ?> ?>">Клик по ссылке 2</a>
<div id="info-2"></div>
<br>
<a id="url-3" href="/myscript.php?id=<?php echo $itemIds ?> ?>">Клик по ссылке 3</a>
<div id="info-3"></div>

<?php endforeach; ?>

В массиве $ids находятся идентификаторы которые ранее берутся с базы данных. Таких идентификаторов в разные периоды времени может быть разное количество.
Данные идентификаторы формируют параметры для каждой ссылки. Все оно работает хорошо. Но нужно это все дело перевести на ajax.
Чтоб, если например, я кликнул по ссылке id="url-1" ответ от сервера отобразился внутри тега <div id="info-1"></div>
И так по каждой ссылке на странице.

=================================================================================
Теперь переходим к ajax. Есть у меня вот такой код ajax на базе jquery.

<script>
	function funcBefore(){
		$("#info-1").text("Ожидание данных");
	}
	function funcSuccess(data){
		$("#info-1").text(data);
	}
	
	
		$(document).ready(function(){
			$("#url-1").on("click", function(){
				$.ajax({
					url: "myscript.php",
					type: "GET",
					dataType: "html",
					beforeSend: funcBefore,
					success: funcSuccess
					
				});
			});
		});
		
</script>

С помощью него я могу обрабатывать нужные мне элементы на странице. Но проблема в том, как мне обработать динамические ссылки на странице, которых может быть разное количество? И у которых разные параметры для GET запроса. То есть, так как я указал в примере выше.

Всем буду очень благодарен за помощь!

Answer 1

[Yan-s]

Добавьте всем ссылкам, которые должны обрабатываться, какой-нибудь класс и вместо селектора по id используйте селектор по классу в jq. Параметры для гет запроса получайте из самой ссылки при помощи того же jQuery, создавайте строку запроса динамически, после клика.

Comments

[Максим Тимофеев]

класс - не красиво. Все таки класс - это для стилизации. Лучше data аттрибут.

Answer 2

[profesor08]

url: $(this).attr("href)

Answer 3

[Максим Тимофеев]

все может быть проще:

$('[data-toggle="myloader"]').on('click',function(e){
    e.preventDefault(); //отменили get
    var url = $(this).attr('href'), // взяли ссылку
          container_selector = $(this).attr('data-container'); // взяли селектор
    $(container_selector).load(url); //отправили ajax, получили html вставили в контейнер
});

Вот и все. Главное у ссылок должен быть data-toggle="myloader" и у каждой свой href и свой data-container, например:

<a href="/some/url/to/?hrenEgoZnaet=kuda" data-container="#some_id" data-toggle="myloader">жмакай нежно</a>